How To Add A Sticky Top Menu For WordPress

You want to make your site easier to use and for this, you would like your top menu to stick and follow the user while they browse your site, but don’t know how. Thankfully there is an easy way to do this with just a line of CSS. Some themes even have this built in so you can activate it with just a click of a button, but in our example, we will show you how to turn any menu or other element into a sticky element.

What is a sticky top menu?

A sticky top menu is a top menu that sticks to the top of the browser and follows the user when they scroll down. It is often used to make navigation easier for users.

How to create a sticky top nav menu

To create a sticky top menu where are going to need to write a piece of CSS and add it to our “style.css” file in our theme.

To make your menu sticky you need the following CSS code…

.class-of-your-top-bar {
   position: fixed;
}

…and that’s it. Remember to change the “.class-of-your-top-menu” to the correct class you can find by inspecting your site code. If done correctly your top menu should now be fixed and follow you no matter how down you scroll.

Note – You can use “position: fixed;” on any element to make it stick to the position it was before you scrolled the page.

If you liked this short tutorial comment below and don’t forget to share it.