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

Question

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>
        </div>
    </div>
</div>
<!-- FOOTER -->
<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 1

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