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.
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
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.
I believe this was fixed with another tutorial. 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.
Thanks, . . . right to the point, works great, and gave me a start up to experiment since I’m beginning in WP
Thanks Carlos
Please how do I set my navigation to sit at the top of the Twenty Thirteen header instead of the sticky method.
This is nice! Thanks for the tips 🙂
Hy
I use the mustache theme (yashma). The bar somehow doesnt stick “anymore”.
I have this 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
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.
Maybe in the javascript.
A childtheme…. ok, I will find that out on Google.
Thanks for your help!
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!
hahaha. Good stuff!
Too many plugins now its hard to find the best ones.
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.
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.
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.
Hello,
Can you please provide a link to the tutorial that Brian Gardner has written.
Thank you
I think that content has been removed.
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.
Yes they’re pretty trendy at the moment Keith.
Thanks for the comment.
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.