How to Create a Sticky Header Menu or Navbar in WordPress

Many of your favorite websites probably have sticky menus that stay visible at the top of the webpage while you scroll. A sticky menu will display links to key pages, such as blog sections or clothing categories, to help visitors easily find what page they are looking for.

Sticky menus simplify the UX for your website visitors who are likely looking for a specific product or service. By using a sticky menu, your business can also benefit from increased engagement, higher customer satisfaction, and enhanced revenue generation.

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. Let’s get started.

Table of Contents

What is a sticky menu?

Image Source

A sticky menu, often referred to as a fixed menu, is a type of navigation bar that stays consistently visible as a user scrolls through your website.

Here’s an example of a sticky menu taken from the HubSpot blog:

Image Source

As you can see, even if you scroll down the page, you can still access the marketing, sales, service, and website blogs. You can also subscribe to the blog or start a demo of the HubSpot CRM platform.

Why Add a Sticky Menu to Your Website

You want to make it as easy as possible for your website visitors to find the information they’re looking for, whether it’s more information about your services, a contact form, blog content, and more. By adding a sticking menu, you can enhance the user experience and maintain design consistency.

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 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 visitors to consume more content, resulting in lower bounce rates.

Image Source

With a sticky navbar, you can also:

• Increase conversion rates by keeping a CTA button visible at all times (typically on the upper right-hand 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.

The best part is that you can create a sticky navbar for both your primary and secondary navigation menus — no need to choose between the two.

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 your business type. 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 the code, you can use a sticky navigation plugin instead.

 nav {
    background:#ffff;
    height:70px;
    z-index:999;
    margin:0 auto;
    border-bottom:1px solid #dadada;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
}

5. Replace #website-navigation with your navigation menu’s CSS class or ID. (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 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.)

Image Source

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

Image Source

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

4. ElementsKit

ElementsKit is a library of modules for Elementor and one of the most popular plugins of its kind. Choose from dozens of customizable widgets that fit seamlessly in your Elementor interface, including mega menus, pricing tables, and sticky headers.

ElementsKit offers a widget for creating sticky content, which you can toggle on and off on different devices like desktop and mobile. There’s also a header widget that you can easily make sticky with styling options.

Check out this video from the developers to see the header module in action.

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

Image Source

Soledad is an incredibly popular multipurpose WordPress theme and a top-selling option for blog, newspaper, and magazine websites. Along with the visual page builder and advanced theme options, Soledad comes with all the necessary tools to build engaging and dynamic websites.

You can also build unlimited header and footer layouts customized for your needs using the theme’s header and footer builders. There are endless options, including building a sticky header to help enhance your website’s user experience.

Pricing: $59

2. Hello Elementor Theme

Image Source

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

3. 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 with a user-friendly sticky menu.

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

Pricing: $60 one-time-fee

4. 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)

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

6. 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. Creating a sticky header is simple whether you select a pre-designed template or build one from scratch.

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. Customize your sticky menu colors to reflect your brand identity.

To ensure users get the most out of your sticky menu, you’ll want to choose colors that encourage users to click on the links and buttons in your navbar.

The most important thing to keep in mind is that you shouldn’t use completely different fonts or colors from the rest of your site. You want your navigation menu to still reflect your branding. For example, you might set the background to transparent. Then, choose a contrasting color from your color scheme for the links.

Most themes and page builders will allow you to change the background color of your navigation bar or header through the theme options.

However, if you didn’t install a theme that allows you to customize your sticky menu colors, you can do so using WordPress’s live customizer. Here’s how:

• Log in to your WordPress admin dashboard.
• On the left-hand sidebar, go to Appearance, then click Customize.
• Click Additional CSS. Note: Do not click on the sidebar item titled “Menu.” It allows you to customize the menu list items, not the colors.
• An editor will come up. Copy and paste the code below.

 nav {
background: rgba (0,0,0,0);
transition: background .5s;
}
nav:hover {
background: #ffffff;
}

• Where it says nav, place the actual CSS ID or class for your navigation menu. Note that it may be “nav” since that’s a standard HTML element. But your theme may be using another ID for your menu. (Here’s how to find your CSS class or ID.)
• Where it says Background, input your chosen background color.

We recommend using a tool such as Coolors.co to find a color that works for you. You can also set the color to transparent.

2. Add your brand’s 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 want users to associate a specific pictorial mark or symbol with their brand.

One example would be the Nike checkmark in Nike’s sticky menu:

Image Source

Notice how Nike doesn’t use its brand name in its menu, which sticks to the top of the screen when users scroll back up.

Here’s how to add a logo icon to your sticky navbar in WordPress.

• Log in to your WordPress admin dashboard.
• On the left-hand sidebar, go to Appearance, then click Customize.
• Go to Theme Options, then click Site Identity.
• Click the button that says Upload logo.
• Choose an image from your local drive. While you do have the option of cropping it, you can also leave it as is.

Make sure the logo is small enough to fit in your sticky menu. Otherwise, it will hang over the edge and obscure part of the page as users scroll. We recommend dimensions less than 100px x 100px for square logo symbols.

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 e-commerce site, for example, a shopping cart icon will be more important to include in the navigation menu than a link to the About page.

If you run a general business website, here’s an example of the menu items you could include:

• Home.
• About.
• Services.
• Blog.
• Contact or CTA button.
• Search Button.

If you’re an ecommerce retailer, here’s an example of the menu items you could include:

• Category one (e.g “Women”).
• Category two (e.g. “Men”).
• Sale.
• Account.
• Search button.
• Shopping cart button.

If you’re a freelancer, you could include the following items in your sticky menu:

• Home.
• Resume.
• Portfolio.
• Blog.
• Contact or a CTA button.

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.

You’ll want to reduce the font size on a smaller screen and hide more menu items. Or you might consider hiding the header when people scroll down the page and making it appear when people scroll up. These are just a few choices you can make when designing navigation for mobile.

5. Include a magnifying glass icon instead of a search text 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.

You can save room while meeting your visitors’ expectations by replacing the search text field with a magnifying glass icon. This is a win-win: Visitors who prefer searching over browsing still have the option to do so, and you can now add another list item to your menu.

6. Add a hover animation to the menu.

While some animations can be distracting, others can help improve your website navigation. For instance, you could make the navbar transparent when the page first loads. That way, it doesn’t distract from the featured slider or heading.

But if a visitor hovers over the menu, the navbar transitions from a transparent background to a white solid color. That way, they can easily see and click on the navigation links.

Adding a hover animation to your sticky navigation menu is easy using CSS. But first, double-check that your theme or page builder doesn’t offer a hover option for your menu. Be sure to explore the entirety of your theme’s settings prior to adding custom CSS.

If you can’t find the hover animation settings for your theme, here’s how to add it using CSS:

• Log in to your WordPress admin dashboard.
• On the left-hand sidebar, go to Appearance, then click Customize.
• Click Additional CSS. Note: Do not click on the sidebar item titled “Menu.” This item allows you to customize the menu list items, not the colors.
• An editor will come up. Copy and paste the code below.

See the Pen Sticky Navbar Hover Color by HubSpot (@hubspot) on CodePen.

• Where it says nav, place the actual CSS ID or class for your navigation menu. Note that it may be “nav” since that’s a standard HTML element. But your theme may use another ID for this element. (Here’s how to find your CSS class or ID.)
• Customize the background and hover colors until you have the result you’d like.
•  

If the colors aren’t changing on the live version of your site, clear your browser’s cache. Your browser may be loading an older and outdated version of your website.

If that doesn’t work, add the !important property at the end of each line of CSS code. That should tell the site to override other settings and load your custom CSS.

7. A/B test your sticky menu.

Experiment with variations of your sticky menu to find out what works best for your visitors. Change the color, the font size, and even the location of the menu. You can do so using an A/B testing plugin — that way, you don’t have to do it from scratch. Split-test multiple variations of the menu before nailing down your final version.

If you wouldn’t like to do a formal split test, you can push one version of your menu live. If you stop getting clicks on your CTA button or the bounce rate increases, change a single element in the sticky menu. Continue until you’ve optimized every element down to the font size.

Image Source

Minimal, Elegant, and Clean

Fixed navigation menus leave less space for other content. This site opts for a minimal corner header. The navbar remains easily accessible without distracting from other important elements on the homepage.

Image Source

Topic-Rich Menu

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

Image Source

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 “Earn Rewards” button on the upper left side. On the upper right-hand, you’re enticed to begin earning rewards by signing up for an account.

Image Source

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 offer users the bare minimum, keeping the focus on the products that are being sold.

Image Source

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.

Image Source

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 (if you ignore the color, of course). This format is ideal for creative businesses and portfolio sites.

Image Source

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.