The title maybe is a little misleading but I'm not 100% sure how this effect is called. I'm pretty sure what I meant is that my
navigation bar is disappearing instead of collapsing.
However my set up is this - I am working on the Layout view of ASP.NET MVC 4 project. I'm using bootstrap 3x but also have included jQuery libs so my <head> part is like this:
@Scripts.Render("~/Scripts/bootstrap.min.js")
@Styles.Render("~/Content/bootstrap.css")
@Styles.Render("~/Content/themes/base/jquery.ui.smoothness.css")
@Scripts.Render("~/Scripts/jquery-2.0.3.min.js")
@Scripts.Render("~/Scripts/jquery-ui-1.10.3.min.js")
//just skipped the standard stuff
In the body I want to have two navbars and one side menu which will be the same for all my pages but I've noticed that when I start to narrow the window at some point instead of getting an effect similar to this example (noticed how the elements get repositioned) I just got both my navbars gone, I can't see them.
The markup for my first navbar is this :
<div class="navbar navbar-static-top navbar-inverse navbar-collapse collapse" role="
navigation">
<ul class="nav navbar-nav ">
<li><a href="#">Info</a></li>
<li><a href="#">Info</a></li>
</ul>
</div>
and the second one is :
<div class="navbar navbar-collapse collapse" role="
navigation" id="main-navigation-bar">
<ul class="nav nav-pills nav-justified">
<li style="border: 1px solid grey"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
In fact the only thing left in my _Layout body is this:
<div class="container-fluid">
@RenderBody()
</div>
which is just for compiling purposes and renders this view :
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
So when I make the window small enough so that my navbars disappear the only thing left is 1..5 numbers from the rendered view.
I tested with only one navbar (commented the other) - no matter which one is commented, when I narrow the window I loose the navbar. How can I keep them using bootstrap 3x?
