How to Create a Sticky Navigation Menu in WordPress

Navigation is an important feature of any website. You want visitors to easily find and engage with your content, while maintaining consistency with your website design.

A sticky menu can provide a seamless user experience without compromising your brand’s style. 

In this article, you’ll learn:

• what a sticky menu is;
• how to create a sticky menu in WordPress;
• sticky menu best practices;
• sticky navigation examples; and
• what WordPress themes have built-in sticky menus.

By the end of this article, you'll be able to select the perfect theme with a built-in sticky menu, or build your own menu from scratch. Then you can move on to implement other proven ways of improving your website's user experience. Let's get started.

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. 

Image Source

Sticky Menu Best Practices

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

1. Design your sticky menu to reflect your brand identity.

You want to choose typography, colors, and icons that encourage your visitors to click on the links and other elements in your sticky menu. That doesn't mean using completely different fonts or colors from the rest of your site, however. You want your navigation menu to still reflect your branding.

Rather than make the menu's background color neon yellow, for example, you might choose a contrasting color from your color scheme. Take the sticky menu below as an example. It stands out on the page without straying from the site's minimalist design. 

Image Source 

2. Add your brand logo.

Adding your logo in your sticky menu is a simple way to keep your brand top of mind as visitors browse your content. This is particularly useful for businesses that need to generate brand awareness and build a larger following. 

3. Only keep the most relevant menu items.

You don’t want to overcrowd your sticky menu with too many options. When narrowing down your selection, consider what items are most relevant to your unique visitors. On an ecommerce site, for example, a shopping cart icon will be more important to include in the navigation menu than a link to the About page. 

Parade's sticky header menu is an excellent example. It only provides primary links that will add value to prospective or existing customers. 

Image Source

4. Create a custom sticky menu for mobile browsers. 

Since you'll have less space to work with on mobile, you'll want to create a menu specifically for smaller screen sizes and for desktop. On a smaller screen, you’ll want to reduce the font size and hide more menu items. Or you might consider hiding the header when people scroll down the page on a mobile device, and making it appear when people scroll up. These are just a few choices you can make when designing navigation for mobile. 

5. Opt for the magnifying glass icon over the search input field. 

Maximizing real estate in your navigation menu is essential no matter what device you're designing for. But it's a balancing act: you want to use space effectively without compromising the user experience. One way you can save room while still meeting your visitors' expectations is by replacing the search input field with a magnifying glass icon. This is a win-win: visitors that prefer searching over browsing still have the option and you can now add another item to your menu.

6. Add a hover or scroll animation. 

While some animations can be distracting, others can help improve your website navigation. On the vitamin shop Anser, for example, the navbar is transparent when the page first loads. That way, it doesn't distract from the featured slider. But if a visitor hovers over the menu, or scrolls down the page, the navbar transitions from a transparent background to a white solid color so they can easily see and click on the navigation links. 

Image Source

7. Experiment with different sticky menus.

Experimenting with variations of sticky menus will help you find what works for your visitors. You’ll want to A/B test multiple variations before nailing down your final version, or during a website redesign.

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. 

When I Shop

When I Shop is a shopping app designed to enable consumers to find unique fashion brands in one convenient place. The sticky menu is clearly designed with this purpose in mind. It provides main navigation links with sub-categories so visitors can find brands according to body fit, origin, specialty, style, and more. 

Image Source

AWD Agency

AWD Agency is an Italian communication company that specializes in digital creative solutions. Recognizing the problem of a fixed navigation menu leaving less space for other content, AWD Agency opts for a transparent horizontal header. That means the navbar remains easily accessible without distracting from other important elements on the homepage.

Image Source

Search Engine Journal

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. 

Image Source

Thrive Market

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.

Image Source

Nike

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. 

Image Source

Multimedios

Multimedios is a Mexican media conglomerate with holdings in broadcast television, radio, publishing, and entertainment. Its website features a sticky horizontal header that collapses behind a hamburger button as the visitor scrolls. That way, visitors can click on any of the posts featured on the homepage or, if they  don't find what they're looking for, return to the navigation menu to click on one of the primary navigation links.

Image Source

jonathan da costa

Unlike the examples above, Jonathan Da Costa's portfolio site features a sticky vertical navigation menu. This non-traditional format is ideal for creative businesses and portfolios like Costa's. 

Image Source

WordPress Themes With Built-In Sticky Menus

Some WordPress themes come ready-made with sticky menus. Others offer widgets so you can make your menu sticky with a click of a button. Either way, you don’t have to worry about adding code or installing a plugin.

Here are our top recommendations for you to explore.

1. Salient Theme

Salient Theme lets you create a stunning website with pre-built layouts. It’s intuitive for beginner designers but robust enough for experts. 

Image Source

2. Pro Theme

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.

Image Source

3. X Theme

X Theme is considered one of the best WordPress themes. With this theme, you can install a unique pre-built website with a sticky  menu — like the demo shown below — in just a few clicks. Then you can configure each element of your sticky menu to be the perfect size. 

Image Source

4. Jupiter X

Jupiter X offers 350+ pre-built websites for different business niches, including corporate, creative, and non-profit organizations. You also can create custom pages from scratch. Whether you select a pre-designed template or build one from scratch, creating a sticky header is simple.  

Image Source

5. Hello Elementor Theme

Hello is a clean, lightweight theme specifically designed for Elementor, the leading WordPress page builder. The sticky header menu is listed as one of its many dynamic content features. You can add one to your site in a few clicks. 

Image Source

Learn more about building a WordPress website using Elementor in HubSpot Academy's free course. 

Create Your Own Sticky Navigation Menu

By remaining fixed and easily accessible to visitors no matter where they've scrolled on the page, sticky menus can enhance the visitor experience on your WordPress website. Take a few moments to create a sticky menu to improve your website's primary navigation.