21

I have a navbar which is below the header image. I want the navbar to stick to the top of the webpage when I scroll down. I can't think of the jQuery or CSS required, because the navbar seems to stick right below the header image leaving some gap.

<div class="headerwrap pull-center">
<div  class="container">
    <div id="header" class="row-fluid">
        <div class="span5" id="phones">
            <img class="phone" src="img/white.png" alt="">
        </div>
        <div class="span7" id="mm-logo">
            <img class="mm-log" src="img/logo.png" alt="">
        </div>
    </div>
</div>
</div>


<div class="navbar navbar-inner" id="border-stuff">
    <div class="span12">

        <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>

<!-- Everything you want hidden at 768px or less, place within here -->
<div class="nav-collapse collapse" id="center-nav">
<ul class="nav" >
    <li><a href="#h1"><h3>Heading1</h3></a></li><li class="divider-vertical"></li>
    <li><a href="#h2"><h3>Heading2</h3></a></li><li      class="divider-vertical"></li>
    <li><a href="#h3"><h3>Heading3</h3></a></li><li class="divider-vertical">  </li>
    <li><a href="#h4"><h3>Heading4</h3></a></li><li class="divider-vertical"></li>
    <li><a href="#h5"><h3>Heading4</h3></a></li>
</ul>
</div>

</div>
</div>
Sebastian Zartner
  • 18,808
  • 10
  • 90
  • 132
user2441391
  • 339
  • 1
  • 5
  • 17

2 Answers2

20

If you want your navbar to stay fixed at the top of the screen only once the header image has scrolled away you can use the bootstrap affix plugin.

Mehdi
  • 7,204
  • 1
  • 32
  • 44
Nathan Breit
  • 1,661
  • 13
  • 33
  • I could not get the affix plugin to work in a navbar as most tutorials show it being used as a side navbar. Could you help me with making a top navbar using the affix plugin? – user2441391 Jul 17 '13 at 15:08
  • 3
    For an example check out the jsFiddle in this answer: http://stackoverflow.com/questions/12070970/how-to-use-the-new-affix-plugin-in-twitters-bootstrap-2-1-0/13151016#13151016 – Nathan Breit Jul 19 '13 at 03:51
4

You just need to replace your Jquery code to this:

$('#sidebar').affix({
  offset: {
    top: 50
  }
});

And adjust the top to whatever fits best.

Henrique
  • 41
  • 1