How to Build a Floating Navigation Bar

This guide will show you how to keep your navigation at the top as you scroll down the page. You can see a demonstration on this page by scrolling down. Notice how the navigation scrolls down with you. There is very little code involved, so here we go!

  1. Determine what your navigation #ID is. In this example, my navigation ID is #navi You should replace mine with your own. There is a good plugin for Firefox and Chrome called Web Developer, which allows you to “Display Element Information” when you click on an element, such as navigation. I recommend using this plugin to determine your navigation #ID.
  2. Add this jQuery code near the footer/bottom of your site.:
    [code lang=”js” highlight=”7,18,20″]
    * Floating Navigation jQuery feature
    $(function() {

    // get initial top offset of navigation
    var floating_navigation_offset_top = $(‘#navi’).offset().top;

    // define the floating navigation function
    var floating_navigation = function(){
    // current vertical position from the top
    var scroll_top = $(window).scrollTop();

    // if scrolled more than the navigation, change its
    // position to fixed to float to top, otherwise change
    // it back to relative
    if (scroll_top > floating_navigation_offset_top) {
    $(‘#navi’).css({ ‘position': ‘fixed’, ‘top':0});
    } else {
    $(‘#navi’).css({ ‘position': ‘relative’ });

    // run function on load

    // run function every time you scroll
    $(window).scroll(function() {


  3. Replace #navi with your own navigation ID on the lines highlighted above.
  4. OPTIONAL: To ensure your navigation stays on top, add a high z-index. Open your CSS stylesheet and find your navigation CSS and add this property:
    [code lang=”css”]

That’s all! Feel free to leave your site URLs where you’ve used this feature. Also, if you have any recommendations for future how-to guides please contact me with your ideas.

35 thoughts on “How to Build a Floating Navigation Bar”

  1. this seems to be what I’m looking for. But wondering if when the menu floated, I want to add logo beside the menu(left side) or search box on the right end part?

    1. something this site have – ourtuts dot com. Notice the floating menu. It changes and floats when we scroll down. Do you know how to do this or knows a tutorial of such kind?

      1. Clever programming sir!
        However, my navbar consists of 7 seperate buttons. I know the navigation #ID of each one but this program only floats 1. What do I need to add to move all 7? Thanks….. Phil

          1. Sorry, I don’t know what you mean. I’m no good at this type of programming. Can you explain further?

    1. You could include it directly on each page between

      1. can u please answer that in more detail. im really confused, ive an index.php(homepage) and a different php fie for navigation bar(nav.php) which one should i include in and in which tag ??! thanks a lot !! :)

  2. Hey man, awesome code!

    I’ve got a similar one on my site at current (that im working on perfecting) and so far this particular tutee/how to is the only one i’ve seen that does what I’m attempting to do.

    Essentially having a fixed position upon page load (like yours along the top) then after scrolling sticking along the top(ish) of the page.

    My only query is, where you have this example sitting directly along the top of the page as it scrolls, is it possible to give it a ‘slight’ buffer/margin from the top? Just so as that it looks slightly separate?


  3. To get a buffer/margin from the top you could do this:

    if (scroll_top > (floating_navigation_offset_top – 10)) {
    $(‘#navi’).css({ ‘position': ‘fixed’, ‘top':10});

    1. Heya,

      I tried adding/removing and changing the code etc. But didn’t seem to work, apologies for the annoyance :(

      The page i’m working on is:

      As you can see upon initial page load it sits perfectly where I want it to (155px from the top), after this however it KEEPS that 155px buffer, which is where I’d prefer it to be… Well about 25px after scroll passes that point.

      jQuery for reference:

      Other than that, the thing itself works perfectly fine, the only oddity is the disappearance of the side border when the Menu Opens/Closes.

  4. Hello this is fantastic, but is there any way I can do it along the bottom of a page? And it adjusts to the size of the browser?

  5. Hey, thanks for sharing! But I got a problem, it moves and works well, but the links (buttons) of my navigation bar doesnt work! HELP!

        1. It turned out to be a z-index issue. In the javascript replace:

          $(‘.tabs-outer’).css({ ‘position': ‘fixed’, ‘top':0});


          $(‘.tabs-outer’).css({ ‘position': ‘fixed’, ‘z-index': 999999, ‘top':0});

  6. I noticed that when scrolling slowly the nav bar stops the page jumps under it quickly. When I try to use your code the nar just keep jumping up and down if the page is not long. Other pages work just fine. I notice on this page it does the jump thing also just that the page is long enough to get past it.

    Any ideas?


    1. OK answering my own question. Someone may run into the same issue. I replaced the navi div with new empty navi2 div to take its place when it stuck to the top. Then hide div when I scrolled back down.

      1. Hi Dan,

        I’m running into the issue you describe but i’m not able to implement the fix you suggest. I’d really appreciate it if you could elaborate/perhaps provide a new code example so I can clear this up on my site. As you have found when scrolling slowly down you can get a ‘jump’ as the nav bar fixes at the top of the screen and page content below this point moves upwards a few pixels.

        Thanks in advance!

        1. I changed the code like below to add hight to a empty div. I also tried having a mini logo open in the center of the nav bar. Thats the commented out code.

          if (scroll_top > floating_navigation_offset_top) {
          var id = $(‘#header’);
          var w = id.width();
          $(‘#nav’).css({ ‘position': ‘fixed’, ‘top':0, ‘width':w});
          // take up the space of the fixed dive above to prvent browser jumping
          $(‘#nav2′).css({ ‘position': ‘relative’, ‘height':’40px’});
          $(‘#return_top’).css({ ‘display': ‘block’});
          if(w > 450){
          } else {
          $(‘#nav’).css({ ‘position': ‘relative’ });
          // take up the space of the fixed dive above to prvent browser jumping
          $(‘#nav2′).css({ ‘position': ‘relative’, ‘height':0});
          $(‘#return_top’).css({ ‘display': ‘none’});

          1. Thanks Dan for posting back so quickly. I’m working to implement what you’ve suggested and looking like a great fix! Appreciate your help. Cheers

  7. Thank you so much for this! Awesome.

    Question: If I’d like the new fixed navigation to start further down (ie. #navi changes to fixed at 200px instead of immediately), how could I implement that into this code? Does that make sense?

    Thanks so much!


  8. Nice. I just had to add the following tags

    added to Body site code injection in Sandvox, works well. Renders to the left, but I’m not bothered about that.

  9. Hi, where should I exactly place the code? I use blogger but can’t get my navigation bar to float. I want “home, about, contact etc” to float and my id is pagelist1 but it doesnt work when I tried,


  10. Hi there!
    I use this code of yours on my website and it’s working! Nice one. But, there is a problem. the fixed widget will scroll till the bottom of my page and it makes the page look ugly when reaching the bottom of the page. SO, is there any solution to stop the fixed object at the footer of the page.
    I don’t want it to scroll over the footer, so I need it to stop about 200px (or so) above the footer.

    Is that possible to do like that?

    Anyway, this is the link to that page:

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>