Categories
Genesis Tutorials

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

Related Code Snippets

38 replies on “How To Make Your Nav Menu Sticky”

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.

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

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.

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

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

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

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.

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.

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!

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.

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.

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?

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.

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.

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.

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.

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.

By Post Author

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

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.

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

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

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

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

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

Leave a Reply

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