User2413 User2413 - 4 months ago 261
CSS Question

Multiple fixed top navbar headers in Twitter Bootstrap 3 not working properly?

html :

<div id="wrap">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">

<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand logo"></div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">

<li><a href="#">Item1</a></li>
<li class="divider-vertical"></li>
<li><a href="#about">Item2</a></li>
<li class="divider-vertical"></li>
<li><a href="#contact">Item3</a></li>
<li class="divider-vertical"></li>
<li><a href="#contact">Item4</a></li>

</ul>
</div>
</div>
</div>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".main-nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse main-nav">
<ul class="nav navbar-nav">

<li><a href="#">it1d</a></li>
<li class="divider-vertical"></li>
<li><a href="#about">it2d</a></li>


</ul>
</div>
</div>
</div>


<div class="container">
<div>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>

<h1>HEllO</h1><br>
<h1>HEllO</h1><br>

<h1>HEllO</h1><br>
<h1>HEllO</h1><br>

<h1>HEllO</h1><br>
<h1>HEllO</h1><br>

<h1>HEllO</h1><br>


<h1>HEllO</h1><br>
</div>

</div>



<!-- FOOTER -->
</div>
<div style="clear:both"></div>


css:

body {
padding-top: 50px;

}

.navbar-static-top{
position: fixed;
right: 0;
left: 0;
z-index: 1000;background: #ccc;
}


click here : http://www.bootply.com/101069

In the above code i am using two navbars which i want to be fixed at the top of the page.so above code works fine for desktop and laptops but when seen in mobile.the first navbar is fix and second navbar is coming down.
so what i need to do to fix both the navbars at the top in both desktops and mobiles??any help would be appreciated??

Answer

You used navbar-static-top for your second navbar. You have to use navbar-fixed-top for both navbars so they stay at the top of the page when you scroll. You will also have to add some space (equal to the height of the first navbar) from the top for the second navbar (equal to the height of the first navbar) to avoid overlapping, like this: top:50px; Here is an update of your code on Bootply: http://www.bootply.com/Xd04ROsODx