How to Create a Sticky Header Menu or Navbar in WordPress

Sticky menus (or navbars) are now a staple inweb design. But when they weren’t, you’d have to scroll all the way to the top to navigate to another page. Naturally, this was inconvenient and clunky for users.

A sticky header provides a seamlessuser experience, encourages deep site navigation, and helps visitors easily find the products and services they need — which will result in more revenue for you.

In this article, we’ll go over:

• What a sticky menu is,
• How to create a sticky menu using CSS,
• How to create a sticky menu with a plugin,
• WordPress themes with 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. Let’s get started.

Here’s an example of a sticky menu, taken straight fromHubSpot’s blog homepage:

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 theHubSpot CRM platform.

Why add a sticky menu to your website?

任何网站的导航是一个重要的特性。You want visitors to easily find and engage with your content while maintaining consistency with your website design.

The same is true for aWordPress website. Whether you’re running a travel blog, an online store, or a personal portfolio site, you want to ensure yourwebsite navigationmakes 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 the visitor to consume more content, resulting in lower bounce rates.

With a sticky navbar, you can also:

• Increase conversion rates by keeping aCTA buttonvisible at all times (typically on the upper right-hand corner).
• Encourage deep site navigation by keeping important links within reach.
• Improvedwell timeby 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 yourprimary 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 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 positionfixed. Follow the steps below.

1. Log into your WordPress dashboard.

2. Go toAppearance>Customize.

3. ClickAdditional CSS.

See the PenSticky Menu Codeby HubSpot (@hubspot) onCodePen.

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

6. Click the bluePublishbutton.

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 toSettings>myStickymenu.
• UnderSticky Class, selectOther Class Or Id.
• In the box next to it, add your class or Id. (Learn how tofind your CSS class or Id here.)

• Change any desired settings, like the background color or opacity.
• Scroll down and click the greenSavebutton.
• 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 toSettings>Sticky Menu (or Anything).
• UnderBasic 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.
• ClickSave 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 processhere.

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

SomeWordPress themescome 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 canadd 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 thebest 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 headeris 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.

粘性菜单最好Practices

你的粘性导航应该使你的网站更容易,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 toAppearance, then clickCustomize.
• ClickAdditional 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.

See the PenSticky Menu Codeby HubSpot (@hubspot) onCodePen.

• Where it saysnav, 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 tofind your CSS class or Id.)
• Where it saysBackground, input your chosen background color.

We recommend using a tool such asCoolors.coto find a color that works for you. You can also set the color to transparent (rgba (0,0,0,0)).

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 inNike’s sticky menu:

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 toAppearance, then clickCustomize.
• Go toTheme Options, then clickSite Identity.
• Click the button that saysUpload 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 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.

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 1 (e.g “Women”)
• Category 2 (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 Me or 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.

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

One way you can save room while still meeting your visitors' expectations is by replacing the search text field with a magnifying glass icon. This is a win-win: Visitors that 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 in using CSS:

• Log in to your WordPress admin dashboard.
• On the left-hand sidebar, go toAppearance, then clickCustomize.
• ClickAdditional 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 PenSticky Navbar Hover Colorby HubSpot (@hubspot) onCodePen.

• Where it saysnav, 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 this element. (Here’s how tofind 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 propertyat 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 anA/B testing plugin— that way you don’t have to do it from scratch.Split testmultiple 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 bounce rate increases, change a single element in the sticky menu. Continue doing so until you’ve optimized every single element down to the font size.

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

新闻网站的目的是帮助你发现莫re content. This website’s sticky menu is neatly organized by topics for eager readers to locate specific content more easily.

测验,成为客户

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.

这不是一个菜单的菜单

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.