How to Create a Sticky Header Menu or Navbar 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.

The same is true for a WordPress website. Whether you’re running a travel blog, an online store, or a personal portfolio site, you want to ensure your website navigation makes it easier for users to find what they need and become subscribers or customers. Because good navigation enhances your user experience, you can improve dwell time, a critical SEO factor.

When sticky navbars weren’t a staple in web design, you’d have to scroll all the way to the top to navigate to another page. This was inconvenient and clunky for users. A sticky menu provides 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 using CSS,
• how to create a sticky menu with a plugin,
• what WordPress themes have built-in sticky menus,
• sticky menu best practices, and
• sticky navigation examples.

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. You can use this for both your primary and secondary navigation menus.

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. It enhances the website experience and entices the visitor to consume more content, resulting in lower bounce rates.

With a sticky navbar, you can also:

• Increase conversion rates by keeping a CTA button visible at all times (typically on the upper right corner).
• Encourage deep site navigation by keeping important links within reach.
• Improve dwell time by providing more content for users to consume.
• Give users an opportunity to find more products to buy, increasing revenue.
• Strengthen brand recognition by keeping your logo within view.

There are a few types of sticky headers that you could use on your site. Let’s go over the available options.

Types of Sticky Headers

The type of sticky header you choose for your site depends on your current design and the type of business you own. Most websites would be best served by a top navbar. However, if you’re a creative, you can have some fun with the placement and put it on the left or right.

• Fixed top navbar: By far the most common type of navbar, this sticky menu stays fixed at the top of the browser window when a user scrolls down the page. This is ideal for long pages, blog posts, category pages, and virtually any website where users need to scroll. The HubSpot website has a fixed top navbar.
• Fixed left navbar: Some brands and websites put their navbar to the left to make the menu items less intrusive or set their website’s design apart. This type of sticky navbar is a better fit for creative businesses, clothing brands, blogs, or websites with a strong modern, contemporary design.
• Fixed right navbar: You can create a sticky navigation menu on the right side to bring attention to your menu items. The fixed right navigation menu is unpopular because most people are accustomed to a left-to-right design. That means that the right is the last place users will look. But, you can use this area to add complementary information, such as a cart or a carousel of related articles.

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

How to Create a CSS Sticky Navbar in WordPress

To create a sticky navbar using CSS, you’ll want to manually add CSS code to your WordPress theme. We’ll be using the position fixed. Follow the steps below.

1. Log into your WordPress dashboard.

2. Go to Appearance > Customize.

3. Click Additional CSS.

 

#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;
}

5. Replace #website-navigation with the CSS class or Id of your navigation menu. (Learn how to find your CSS class or Id here.)

6. Click the blue Publish button.

7. Refresh your website to see your sticky menu.

If you don’t want to code your sticky menu, you can use a plugin instead.

How to Create a Sticky Header Menu with a WordPress Plugin

WordPress plugins make it easy for you to add sticky menus, since 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.

To create a sticky navbar using myStickymenu:

• 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.

To create a sticky navbar using Sticky Menu (or Anything!) on Scroll:

• 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 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.

If you don’t want to use CSS or install a plugin, you’re in luck — you can install a theme that comes with a sticky navbar instead.

WordPress Themes With Built-In Sticky Menus

Some WordPress themes come with ready-made 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. 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.

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

Pricing: Free

2. Salient Theme

Image Source

Salient Theme lets you create a stunning website with pre-built layouts. It’s intuitive for beginner designers but robust enough for experts. With its front-end editing, Google Fonts integration, and demo importer tools, you can easily design a website that has a user-friendly sticky menu.

Most Salient templates come with the sticky menu already activated. If it doesn’t, you can activate it on your WordPress admin dashboard. Bonus: if you ever get tired of having a sticky menu, you can include a back-to-top button that allows users to get back to the header.

Pricing: $60 one-time-fee

3. Pro Theme

Image Source

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. The theme is dynamic, too, allowing you to create a full-width landing page without a menu. When users scroll down, the menu appears and sticks to the top of the page.

Pricing: $69 one-time fee (Single Use License); $349 one-time fee (Unlimited Use License)

4. X Theme

Image Source

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 above — in just a few clicks. Then you can configure each element of your sticky menu to the perfect size. You can also include a right-side sticky navigation menu to set your website apart.

Pricing: $59 one-time fee

5. Jupiter X

Image Source

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.

Pricing: $59 one-time fee

Whether you’re creating your sticky header by coding it using CSS, installing a plugin, or switching to a theme that offers the option, you should keep best practices in mind.

Sticky Menu Best Practices

Your sticky navbar should make your site easier, not harder, to use. 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.

2. Add your brand logo.

Adding your logo to 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.

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. You can make the navbar 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.

7. Experiment with different sticky menus.

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

Looking for inspiration? Let’s explore some of the best navigation menus out there.

Sticky Navigation Examples

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

Easy-to-Reach Filter and Discover Buttons

In this example, a shopping app wants to enable consumers to easily find unique fashion brands. The sticky menu is clearly designed with this purpose in mind. It provides four simple navigation links to find, discover, and filter brands and products.

Minimal, Elegant, and Clean

Recognizing the problem of a fixed navigation menu leaving less space for other content, this site opts for a minimal horizontal header. The navbar remains easily accessible without distracting from other important elements on the homepage.

Topic-Rich Menu

Journalism sites are meant to help you discover more content. This website’s sticky menu is neatly organized by topics for eager readers to locate specific content more easily.

Take the Quiz, Become a Customer

This hair care brand doesn’t miss out on the sticky navbar’s real estate by featuring a highlighted “Take Quiz” button on the upper left side. On the upper right hand, you’re enticed to begin earning rewards by signing up for an account.

Vertical and Nearly Invisible

A nearly invisible vertical menu makes this clothing brand look modern and minimal. This menu’s small type and transparent background offers users the bare minimum, keeping the focus on the products that are being sold.

Follow Us On Social

This website features a sticky horizontal header that collapses behind a hamburger button as the visitor scrolls. On the upper right hand corner, prominent social buttons invite you to follow the publication on social media.

The Menu That’s Not a Menu

Unlike the examples above, this portfolio site features a sticky vertical navigation menu hidden behind a hamburger button. It’s so out-of-the-way that it’s almost as if it’s not there. This format is ideal for creative businesses and portfolio sites.

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. Whether you do it using CSS, a plugin, or a theme with a built-in sticky navbar, be sure to follow best practices so that your menu makes your site easier to use and increases conversions.

Editor's note: This post was originally published in July 2019 and has been updated for comprehensiveness.