• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2665

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

How To Make Your Nav Menu Sticky

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

Nav Menu

Reader Interactions

Comments

  1. Brian Thomas says

    March 21, 2018 at 6:48 pm

    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.

    Log in to Reply
    • Brian Thomas says

      March 23, 2018 at 12:12 am

      I believe this was fixed with another tutorial. Thanks.

      Log in to Reply
  2. David says

    August 24, 2014 at 9:47 am

    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

    Log in to Reply
    • Brad Dalton says

      August 24, 2014 at 4:23 pm

      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.

      Log in to Reply
  3. Carlos says

    February 3, 2014 at 3:52 pm

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

    Log in to Reply
    • Brad Dalton says

      February 3, 2014 at 4:34 pm

      Thanks Carlos

      Log in to Reply
  4. POLYSTAR says

    January 29, 2014 at 4:58 pm

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

    Log in to Reply
  5. Abinash Mohanty says

    November 13, 2013 at 3:39 pm

    This is nice! Thanks for the tips 🙂

    Log in to Reply
  6. martin says

    October 30, 2013 at 5:01 pm

    Hy

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

    I have this 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;

    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

    Log in to Reply
    • Brad Dalton says

      October 30, 2013 at 5:17 pm

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

      Log in to Reply
    • Martin says

      October 30, 2013 at 5:32 pm

      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.

      Log in to Reply
      • Brad Dalton says

        October 30, 2013 at 6:24 pm

        Maybe in the javascript.

        Log in to Reply
  7. Margriet says

    August 26, 2013 at 10:30 am

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

    Thanks for your help!

    Log in to Reply
    • Brad Dalton says

      August 26, 2013 at 11:55 pm

      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.

      Log in to Reply
      • Margriet says

        August 27, 2013 at 5:59 am

        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!

        Log in to Reply
        • Brad Dalton says

          August 27, 2013 at 6:29 am

          hahaha. Good stuff!

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

          Log in to Reply
  8. Margriet says

    August 25, 2013 at 5:55 pm

    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.

    Log in to Reply
    • Brad Dalton says

      August 25, 2013 at 8:52 pm

      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.

      Log in to Reply
  9. Terence says

    August 13, 2013 at 11:34 pm

    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?

    Log in to Reply
    • Brad Dalton says

      August 14, 2013 at 10:00 am

      Same solution Terence.

      Simply apply position fixed to those selector classes.

      .site-header .widget-area {
          position: fixed;
      }

      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.

      Log in to Reply
      • Terence says

        August 27, 2013 at 2:22 am

        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.

        Log in to Reply
        • Brad Dalton says

          August 27, 2013 at 2:47 am

          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.

          Log in to Reply
          • Terence says

            August 27, 2013 at 2:53 pm

            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.

          • Brad Dalton says

            August 28, 2013 at 12:16 am

            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.

  10. Darleen says

    August 13, 2013 at 6:19 am

    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!!

    Log in to Reply
    • Brad Dalton says

      August 13, 2013 at 6:41 am

      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.

      Log in to Reply
  11. Qaysar says

    August 4, 2013 at 8:56 pm

    Hello,

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

    Thank you

    Log in to Reply
    • Brad Dalton says

      August 5, 2013 at 4:41 am

      I think that content has been removed.

      Log in to Reply
  12. Dave Fogel says

    July 24, 2013 at 4:47 pm

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

    Log in to Reply
    • Brad Dalton says

      July 24, 2013 at 7:06 pm

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

      Log in to Reply
  13. Keith Davis says

    May 31, 2013 at 9:05 pm

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

    Log in to Reply
    • Brad Dalton says

      June 1, 2013 at 7:19 am

      Yes they’re pretty trendy at the moment Keith.

      Thanks for the comment.

      Log in to Reply
  14. Stephanie says

    May 22, 2013 at 12:00 am

    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

    Log in to Reply
    • Brad Dalton says

      May 22, 2013 at 12:24 am

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

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems