Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap, make a navbar sticky after scrolling down?

Tags:

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>
like image 735
user2441391 Avatar asked Jul 16 '13 21:07

user2441391


2 Answers

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.

like image 87
Nathan Breit Avatar answered Sep 20 '22 15:09

Nathan Breit


You just need to replace your Jquery code to this:

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

And adjust the top to whatever fits best.

like image 24
Henrique Avatar answered Sep 20 '22 15:09

Henrique