sticky menu WordPress

When you create a website, you spend a lot of time choosing your theme, crafting your content, and promoting your brand online. But no matter how great your site looks and how interesting your content is, you can’t reach your goals if users can’t find your key pages easily. A sticky menu can help this cause. In this article, we’ll show you how to create a sticky menu in WordPress 🧑‍💻.

While there are lots of ways you can improve navigation on your site, a sticky menu is a unique solution since it stays permanently visible on the screen without interrupting or annoying your visitors.

This makes it easy for them to get to your most important content fast.

What is a sticky menu and why do you need one?

Traditional website menus would disappear once the user scrolls past them. This makes it very easy for people to overlook some important piece of content that you really want them to see.

Sticky menus can solve this issue. A sticky menu is a fixed navigation menu on a website that remains visible and in the same place, even when users scroll away and explore the site. It’s so effective that persistent navigation bars (or sticky headers) are pretty much a standard in web design.

👉 Here’s a demo of a sticky menu in WordPress:

Sticky menus are also popular because they aren’t obtrusive. You can usually find them on the side of the screen, which gives you plenty of space to create a website that looks exactly the way you want. These menus can improve the user experience because they contain helpful links that make it easier for users to navigate your site and find exactly what they are looking for with a click or two.

Because these sticky menus are locked in place, your audience will always see your most valuable content, drawing their eyes exactly where you want to. You can use the sticky menu to promote your call-to-action landing pages, social media icons, popular categories, and more.

For example, if you are running an ecommerce store, your top navigation menu should have all of the links that drive sales, like product search, categories, and checkout. If you make that top menu sticky, you can reduce your cart abandonment rates.

⌛ See why it’s important? Let’s go over the steps you need to follow to create a sticky menu in WordPress.

How to create a sticky menu in WordPress

We’re going to cover two different ways you can create a sticky menu:

(a) Using the Neve theme to create a sticky menu in WordPress

Neve theme.

First, let’s take a look at creating a sticky menu using the Neve theme. Neve is one of the most accessible and useful themes you can adopt for your blog or ecommerce site – and it’s really easy to create a sticky menu using this theme. When you opt for the Pro Version of Neve, you can create a sticky menu that moves when a reader scrolls. And there are plenty of other exciting features too!

👉 Here’s how to create your sticky menu:

1. Once you have the Neve theme installed, click on Appearance and Customize.

Accessing the WordPress customizer in Neve to start the process of creating a sticky menu

2. Click on Header on the left sidebar menu to open the header builder.

Customizing the header in Neve

3. You can set up each of the header builder’s three rows to be Sticky and/or to Show only on scroll. Sticky, as we’ve learnt, means that the row will always stick to the top of the page. Show only on scroll means that the row will only appear after the user scrolls on the page.

Access the option to make your menu sticky by clicking the gear icon you’ll see at the beginning of each row:

Neve sticky menu settings

4. Simply click on the Stick to top option on the left to make your menu sticky.

Neve sticky menu top settings

💡 Bonus tip: Want to make your sticky header smaller when visitors scroll? Read our guide to find out how.

(b) Create a sticky menu using a WordPress plugin

You can also use a plugin to create your sticky WordPress menu. Don’t worry – it’s very easy! 🤩

1. Go to plugins on the right-hand side of your WordPress admin console and select Add New.

2. Search for a sticky menu plugin. We recommend My Sticky Bar because it works with any theme and is very easy to install. Once you find it, click Install and Activate.

3. Next, head over to My Sticky Bar > Sticky Menu Settings.

Sticky Menu Settings

4. You can now choose the Sticky Class by selecting a predefined class matching your website or creating a custom class.

Sticky Class: Selecting a predefined class

5. If you decide to create a custom class, you should know that the plugin will select the appropriate class or ID from the dropdown menu. However, if it fails to do so, you can manually choose the custom class or ID option.

Sticky Class- Custom Class

6. The next step is to customize the sticky menu settings. You can disable the menu on smaller screens by specifying the pixel width, choosing to display it when scrolling on the homepage, and selecting effects like fade or slide. Additionally, you can set the background color of the sticky menu and more.

Sticky Menu Settings Panel

7. The last step is to choose settings such as hide on scroll down, page targeting and CSS styles you may want to keep or exclude. Once you have made all the changes, click on the Save tab, and that’s it!

Sticky Menu Page Targeting and CSS Style settings

This is what the final result can look like:

Sticky Menu Example

Congrats, you’ve made your WordPress menu sticky! 👏

You’ve just made a sticky menu in WordPress, which means you’ve actually made your entire website a lot more accessible. Sticky menus mean that your visitors don’t have to click around constantly to make their way through your site, making the entire user experience a lot more pleasant.

💡 If you found this post helpful, you might also be interested in our tutorial on how to create a WordPress mega menu and our other tutorial on how to add menu icons to your navigation menu.

Let us know what you need the sticky menu for. Use the comments section below.

Yay! 🎉 You made it to the end of the article!

Inline Feedbacks
View all comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!