CODEWITHSUNDEEP
htmlcsstwitter-bootstrapnavbar
Grizzly
Grizzly

Reputation: 5943

Place second navbar underneath first navbar

I am using Bootstrap to create my navigation bars at the top of my page.

My goal is to create a 2nd navigation bar that is smaller in height, goes underneath the original navbar, and is fixed to the top so that when the user scrolls.. both navigation bars scroll with them.

I looked at this, and adding a margin-top:43px; does push the 2nd navbar underneath the original navbar, but my body-content doesn't auto adjust.. instead the 2nd navbar just cuts the top off of my body-content.

I am just starting this, so here the HTML for my original navbar along with the 2nd navbar:

HTML:

<nav class="navbar navbar-fixed-top navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</nav>


<nav class="navbar navbar-fixed-top navbar-inverse" style="margin-top:50px"></nav>

<div class="container body-content">

    <p>This is a test!</p>
    @RenderBody()

    <footer>
        <p>&copy; @DateTime.Now.Year - ASP.NET Application</p>
    </footer>

</div>

Here is a BOOTPLY for a visual of what I am trying to explain.

Let me know if I can explain anything else.

Any help is appreciated.

Upvotes: 1

Views: 3052

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362350

Since you're using 2 fixed navbars you have to double up on the required body padding to accomodate for the combined height of both navbars..

body {
   padding-top: 135px;
}

http://www.bootply.com/iY0za3bfls

It doesn't have to be exactly 135px, as explained in the docs you should try out your own values knowing that the navbar is 50px high.

Upvotes: 1

Related Questions