How to Create a Sticky Navigation Menu in WordPress

Navigation is an important part of any WordPress website. You want visitors to easily find and engage with your content. A sticky menu can give your website this functionality without compromising your brand’s style. 

In this article, you’ll learn the purpose of a sticky menu and how to create a sticky menu. Plus, we have a few sticky menu examples to spark your creativity.

Here’s an example of a sticky menu on the main page of the HubSpot Blog.

Why Implement a Sticky Menu?

When visitors browse your website, you want to provide them with easy access to your content. Some visitors find it burdensome to scroll back to the top of a page to navigate a website. 

Sticky menus provide a simple solution to this annoying (and time-consuming) problem. With a fixed navigation bar, visitors can quickly find what they need on your website. It enhances the website experience and entices the visitor to consume more content, resulting in lower bounce rates. 

How to Create a Sticky Header Menu in WordPress

Now, it’s time to set up a sticky header menu on your website. If you have technical skills, start with the CSS code method. But if you don’t feel comfortable changing code, you can skip to the plugin method. 

CSS Code Method to Create a Sticky Header Menu

You’ll want to manually add CSS code to your WordPress theme. Follow the steps below.

• Log into your WordPress dashboard.
• Go to Appearance > Customize.
• Click Additional CSS.

• Add this CSS code:

 

#website-navigation {
background:#fff;
height:60px;
z-index:170;
margin:0 auto;
border-bottom:1px solid #dadada;
width:100%;
position:fixed;
top:0;
left:0;
right:0;
text-align: center;
}

• Replace #website-navigation with the CSS class or Id of your navigation menu. (Learn how to find your CSS class or Id here.)
• Click the blue Publish button.
• Refresh your website to see your sticky menu.

Plugin Method to Create a Sticky Header Menu

WordPress plugins make it easy for you to add sticky menus. No coding experience is required. Check out the three plugins below to get started. 

1. myStickymenu

myStickymenu is a popular plugin for creating custom sticky menus. Your visitors will reach your navigation menu without wasting any time. 

• Install and activate the plugin.
• Go to Settings > myStickymenu.
• Under Sticky Class, select Other Class Or Id.
• In the box next to it, add your class or Id. (Learn how to find your CSS class or Id here.)

• Change any desired settings, like the background color or opacity.
• Scroll down and click the green Save button.
• Refresh your website to see your sticky menu.

2. Sticky Menu (or Anything!) on Scroll

Sticky Menu (or Anything!) on Scroll allows you to create fixed navigation bars, sidebars, and call-to-action boxes. There’s also the option to limit your sticky menu to appear on specific screen sizes.

• Install and activate the plugin.
• Go to Settings > Sticky Menu (or Anything).
• Under Basic settings, add the navigation bar you want to be your sticky menu.

• Change any desired settings, like the space between the top of the page and the sticky element.
• Click Save Settings.
• Refresh your website to see your sticky menu.

3. Hero Menu

Hero Menu is a premium WordPress plugin for creating responsive sticky menus. Its drag-and-drop builder makes it super easy to build every aspect of your navigation. You also can configure the menu’s height, color, transparency, and font to fit your website. Learn more about the plugin and the setup process here. 

Source: EnvatoMarket

WordPress Themes With Built-In Sticky Menus

Some WordPress themes come ready-made with sticky menus. So, you don’t have to worry about adding code or installing a plugin. Here are our top recommendations for you to explore.

• Salient Theme lets you create a stunning website with pre-built layouts. It’s intuitive for beginner designers but robust enough for experts. 
• Pro Theme is redefining the future of website development. The theme’s header builder gives you the ability to create simple to complex sticky menus.
• X Theme is considered the first of its kind. You can select unique website designs with just a few clicks. Plus, there’s the option to make each element of your sticky menu the perfect size. 
• Jupiter X offers 220+ pre-built websites. You also can create custom pages from scratch.

• Elementor is the leading WordPress page builder. The sticky header menu is listed as one of its many dynamic content features.

Sticky Navigation Examples

An eye-appealing sticky menu will help visitors navigate your website and keep them engaged with your content. Use the examples below as a creative boost to creating your sticky menu. 

Search Engine Journal is a staple within the SEO and marketer communities. The website’s sticky menu is neatly organized by topics for eager readers to locate specific content more easily. 

Source: Search Engine Journal

E-commerce retailer Thrive Market uses a simple sticky menu displaying only the brand’s logo and a call to action. The brand gives visitors no distractions to try their organic products.

Source: Thrive Market

Nike uses a double row sticky menu with a variety of important navigation links. Visitors can learn about new releases, log into their accounts, and even search the entire website. 

Source: Nike

Sticky Menu Best Practices

Consider these tips to make your sticky menu as user-friendly as possible. 

1. Design your sticky menu to fit the look and feel of your website. Choose a font, font size, and font color that will encourage your visitors to click-through.
2. Add your brand logo to your sticky menu. This will keep your brand top of mind as visitors browse your content.
3. Narrow down menu items to the most relevant pages. You don’t want to overcrowd your sticky menu with too many options. 
4. Create a custom sticky menu for mobile browsers. On a smaller screen, you’ll want to reduce the font size and hide more menu items.
5. Experiment with different sticky menus to find what works for your visitors. You’ll want to A/B test multiple variations to nail down your final version.

Sticky menus enhance the visitors’ experience. So, take a few moments to create a sticky menu to improve your website navigation.