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