WP SITES

Log in

How To Make Your Nav Menu Sticky

—

by

Brad Dalton

There’s many ways to make your nav menu sticky. The easiest way is to use pure CSS code. You could also install a plugin or use a combination of CSS, PHP & Javascript.

In this very short tutorial, i’ll provide you with the CSS code to make your nav menu sticky in any theme.

You will need to change the nav menu class depending on which theme you’re using.

Note: All CSS code should be pasted at the end of your child theme. Here’s 2 free child themes for Twenty Twelve & Thirteen.

Sticky Nav Menu Default Themes

Here’s the code to make a nav menu sticky using the Twenty Thirteen default theme for WordPress.

Sticky Menu Genesis

This code will make your genesis nav menu sticky

Nav Menu Covering Header?

If you menu covers part of your header image, you may need to use CSS to push the header down the height of your menu:

.site-header { 
    margin-top: 50px; 
}

Simply adjust the 50px to suit your needs.

Postion Sticky

You can also use position:sticky like this :

position: -webkit-sticky;
position: sticky;
top: 0;

Here’s a working example which uses position: sticky

Related Code Snippets

Comments

38 responses to “How To Make Your Nav Menu Sticky”

  1. Brian Thomas Avatar
    Brian Thomas

    Hello, on the following website (http://integritycontractingva.com/temporary/) I’m having issues with the mobile menu on sub pages. The mobile menu is covering the image that I have at the top of the page. Also when I open the menu it’s not pushing the image down far enough. The image is overlapping the menu text. I’ve even tried to bring the image in as a “featured image” and still the same results. The home page is working because the slide show images is part of the front-page slideshow. Any help is appreciated. Thanks.

    1. Brian Thomas Avatar
      Brian Thomas

      I believe this was fixed with another tutorial. Thanks.

  2. How to customize a Genesis Blog

    […] WPSites has a tutorial is not only for Genesis users, but he also has instructions for ccreating a sticky navigation menu using the default WordPress themes. […]

  3. David Avatar
    David

    Hello is it possible to make the menu in Twenty Fourteen sticky?
    It is suppose to be sticky but always breaks viewing on my mobile phone.

    Thank you for any help you can offer

    1. Brad Dalton Avatar
      Brad Dalton

      I’d ask that question on the Twenty Fourteen themes forum as they are the experts and understand the code and Media Queries better than anyone else.

  4. Carlos Avatar
    Carlos

    Thanks, . . . right to the point, works great, and gave me a start up to experiment since I’m beginning in WP

    1. Brad Dalton Avatar
      Brad Dalton

      Thanks Carlos

  5. POLYSTAR Avatar
    POLYSTAR

    Please how do I set my navigation to sit at the top of the Twenty Thirteen header instead of the sticky method.

  6. Abinash Mohanty Avatar
    Abinash Mohanty

    This is nice! Thanks for the tips 🙂

  7. martin Avatar
    martin

    Hy

    I use the mustache theme (yashma). The bar somehow doesnt stick “anymore”.

    I have this code
    [code]
    .navigation_main.navbar-fixed-top{
    background: url(../img/pattern2.png) repeat-x scroll left bottom transparent;
    left: 0;
    margin-bottom: 0;
    position: fixed;
    right: 0;
    z-index: 1030;
    [/code]

    But in doesn’t stick (though it did before, but not at the right moment). It was scrolling “away” and then suddenly appeared and stuck to the top. But now it doesn’t stick at all.

    Thanks for any help

    1. Brad Dalton Avatar
      Brad Dalton

      Haven’t tried that method as i prefer to keep it simple so less can go wrong especially with special effects and Javascript.

    2. Martin Avatar
      Martin

      Finally found the error. The theme wants me to start “dynamic page” Then this nav bar sticks. But still to “late”

      Anyone an idea where i have to look up the position, where i can tell the nav bar to stick. The best would be when the nav bar reaches the top of the display of course.

      1. Brad Dalton Avatar
        Brad Dalton

        Maybe in the javascript.

  8. Olá, mundo! | Teclativa

    […] http://wpsites.net/web-design/how-to-make-your-nav-menu-sticky/ […]

  9. A New Beginning, A Personal Goodbye, and A Lot Of Geekery

    […] Sticky navigation menu […]

  10. How to set up Sticky Header or Navigation in Genesis

    […] http://wpsites.net/web-design/how-to-make-your-nav-menu-sticky/ […]

  11. Margriet Avatar
    Margriet

    A childtheme…. ok, I will find that out on Google.

    Thanks for your help!

    1. Brad Dalton Avatar
      Brad Dalton

      Its very easy.

      There’s also a plugin which creates a child theme for your parent theme in one click.

      I wrote a post about it last year.

      1. Margriet Avatar
        Margriet

        Wow, for each “problem” is a solution (plugin). Thank you.

        But I have made it myself and I was very proud I did.
        (I used the site of my husband to test…ssssssttt)

        Thanks!

        1. Brad Dalton Avatar
          Brad Dalton

          hahaha. Good stuff!

          Too many plugins now its hard to find the best ones.

  12. Margriet Avatar
    Margriet

    Hi Brad,

    I was looking for this solution. I have the theme twenty thirteen and I want the nav bar sticky on top of the page.

    I have tried the code, but it does not work.

    Can you tell me in which file I have to put the code (style.css?) and where in the file?

    Thanks a lot!!!

    Margriet.

    1. Brad Dalton Avatar
      Brad Dalton

      Hi Margriet

      Its best practice to create a child theme where any code additions or changes can copied over from your parent theme and modified in the child theme.

      This way you won’t lose any custom coding that you add to your site.

      The code needs to be pasted into the style.css file which i tested on the Twenty Thirteen child theme.

  13. Terence Avatar
    Terence

    Brad,

    What about if you are using Genesis 2.0 and an HTML5 theme which uses a widgetized menu in the header?

    How would you make that sticky?

    1. Brad Dalton Avatar
      Brad Dalton

      Same solution Terence.

      Simply apply position fixed to those selector classes.
      [code]
      .site-header .widget-area {
      position: fixed;
      }
      [/code]

      You may need to apply some margin/padding to this rule as well.

      You could also hook in the menu before the primary sidebar and do the same thing.

      1. Terence Avatar
        Terence

        At first it seemed to work OK but as you can see here ~ even when I use max-width: 100%; it doesn’t work that way for all viewports, 768 and 1024 for example. The header now doesn’t fit to the full width of the viewport. Any idea what is doing this and why it shows up now? And what’s more important, how to fix it?

        Many thanks.

        1. Brad Dalton Avatar
          Brad Dalton

          Hi Terence

          It needs responsive design.

          You will need to customize the responsive design using the CSS media queries as an guide in your child themes style.css file.

          Hope you understand that responsive design varies depending on the individuals preferences and the design of the theme you’re using.

          It’s not the same for every theme.

          1. Terence Avatar
            Terence

            Hi Brad,

            So now, arguably, I am wiser, but I still don’t know what to do specifically to resolve this issue. The Epik theme I am using is, of course, responsive HTML5/CSS3, but I need to get a better idea ~ less general ~ how to edit the style.css.

            Now you’ve told me what’s wrong, can you tell me how to fix it? From what you’ve told me so far, I am still lost.

            Terence.

          2. Brad Dalton Avatar
            Brad Dalton

            I would look at existing CSS code for media queries and base your code on that otherwise its really custom design and you may need to take a course to better understand how it works.

            I will be writing a tutorial based on one theme and making different elements responsive soon.

  14. Darleen Avatar
    Darleen

    Hi: I am working on a Genesis child Theme Metro and have made the changes to make the TOP NAV STICKY, however I am running into some issues with the mobile responsive theme, not sticking, but sort of floating down the page.
    Is there a work around for responsive? Or other option?
    Thanks!!

    1. Brad Dalton Avatar
      Brad Dalton

      Hello Darleen

      I test all custom coding for mobile responsive however it may be effected by others coding modifications.

      Mobile responsive CSS may need to be added to any modifications you make to the default code.

      Its a personal choice because different people like to display their sites differently on different mobile devices.

      You can add it in the media queries section and adjust the values to suit your needs.

  15. Qaysar Avatar
    Qaysar

    Hello,

    Can you please provide a link to the tutorial that Brian Gardner has written.

    Thank you

    1. Brad Dalton Avatar
      Brad Dalton

      I think that content has been removed.

  16. Dave Fogel Avatar
    Dave Fogel

    What about doing a sticky menu that only sticks once the user has scroll down past your header to the menu?

    1. Brad Dalton Avatar
      Brad Dalton

      Yeah you can do that Dave and Brian Gardner has written a tutorial about how to on his site.

  17. Keith Davis Avatar
    Keith Davis

    Hi Brad
    Another useful bit of information – starting to see sticky menus all over the place.

    1. Brad Dalton Avatar
      Brad Dalton

      Yes they’re pretty trendy at the moment Keith.

      Thanks for the comment.

  18. Stephanie Avatar
    Stephanie

    Hello Brad,

    Thank u very much for posting this code but could someone please tell me what it is to have a sticky nav menu? Thank you very much,
    Stephanie

    1. Brad Dalton Avatar
      Brad Dalton

      The nav menu sticks to the top of the page when you scroll down so its always visible.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.