How can I make my website’s navigation bar stick to the header?

Deepanshu September 8, 2012
Pinterest Stumbleupon Whatsapp

I know it is easy to make navigation bar sticky. The problem is that the nav on my site is somewhat after about hundred pixels, same as MakeUseOf’s subnav or search bar floating above. I face the same problem. Please help me!

How have you guys accomplished it? I probably would like CSS to do it, but any workaround will do.

  1. Irshaad Abdool
    September 10, 2012 at 6:55 pm

    using dynamic position and attribute its position according to the screen, not to the page

  2. muotechguy
    September 10, 2012 at 6:15 pm

    Hi Deepanshu; if you examine our source, you'll see we use this jquery:

    //make the subnav sticky
    var stickyHeaderTop = $('#subnav-container').offset().top;

    $(window).scroll(function(){
    if( $(window).scrollTop() > stickyHeaderTop ) {
    $('#subnav-container').css({position: 'fixed', top: '0px'});
    $('#subnav-alias').css('display', 'block');
    } else {
    $('#subnav-container').css({position: 'static', top: '0px'});
    $('#subnav-alias').css('display', 'none');
    }
    });

    and this html:

    • Deepanshu
      September 13, 2012 at 5:53 am

      Will try this as well, Thanks

  3. Deepanshu
    September 9, 2012 at 7:20 am

    This is the link to my theme's demo:
    http://wp.digitalnature.eu/mystique/
    And let me explain again:
    the navigation bar comes after the logo and thus what I want is, to make the header fixed but only after scrolled till the it. you can see the same effect at the bar with the search box.
    Just try scrolling slowly from the top and you will understand.

    • Erlis Dhima
      September 9, 2012 at 7:33 pm

      I know what you mean now! But don't say it's easy, since it's not!
      I will give you some recommendations:
      1. First install on your browser Firebug (I know it is for firefox, since I use it myself.. But I don't know for other browsers...)
      2. Using Firebug locate the header (navbar or search box, whatever you want to do the changes..) ID. (or for advanced changes even the class name)
      3. Go to the site script where you do the changes(locate the CSS script)
      4. Add a piece of code with the ID you found, like this:
      #ID {
      width: 100%;
      display: inline block;
      overflow: hidden;
      position: fixed;
      width: 100%;
      height: [value]px;
      max-width: [value]px;
      min-width: [value]px;
      margin: 0 auto;
      overflow: hidden;
      }

      This is only a small code, which it might not help you much!
      But here are some links where you can find a detailed info:
      http://stackoverflow.com/questions/10708373/how-can-i-make-a-floating-nav-bars-width-act-fluidly-with-the-rest-of-the-websi
      http://liljosh.com/how-to-build-a-floating-navigation-when-scrolling/
      http://www.w3schools.com/css/css_navbar.asp

      I recommend you the first one!
      Hope this helped! Please tell me if it worked! :)

      • Deepanshu
        September 13, 2012 at 5:52 am

        Thanks Erlis, and sorry couldn't reply to you. After checking out the links I think second one should work for me.
        Will let you know what works.

      • Deepanshu
        September 16, 2012 at 9:36 am

        Yes the second link worked.
        I wonder why these helpful pages don't appear on serps .

        • Erlis Dhima
          September 16, 2012 at 9:07 pm

          I'm glad it worked! It depends on what you type, when you search! But like always, you have MUO for any problem... ;)

  4. Erlis Dhima
    September 8, 2012 at 10:17 pm

    Please sent a link of the site, so I can understand better your problem!

    • Sebastian Hadinata
      September 9, 2012 at 3:19 am

      Yep.. it would be easier to understand what you need if you sent us a link.

  5. Freecycle Me
    September 8, 2012 at 9:36 pm

    So you have the same as the makeuseof site? and you basically want to get rid of the very top nav bar so it acts almost like another toolbar in the browser?

  6. Socrates Maura
    September 8, 2012 at 7:59 pm

    Alternatively you can use position:fixed; to make it stay on top, even when scrolling.

  7. Socrates Maura
    September 8, 2012 at 7:57 pm

    #header {
    position: absolute;
    top: 0px;
    }

Ads by Google