How to Create a Sticky Header Menu or Navbar in WordPress

Sticky menus (or navbars) are now a staple in网页设计。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 seamless用户体验，鼓励深入的现场导航，并帮助访客轻松找到所需的产品和服务，这将为您带来更多收入。

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 from集线器’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 the集线器CRM platform。

Why add a sticky menu to your website?

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 aWordPress website。无论您是运行旅行博客，在线商店还是个人投资组合网站，都需要确保website 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.

当访客浏览你的网站,你想亲vide 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.

粘性菜单为这个令人讨厌的（耗时的）问题提供了简单的解决方案。借助固定的导航栏，访客可以快速找到所需的东西。它增强了网站的体验，并诱使访问者消耗更多内容，从而降低跳出率。

With a sticky navbar, you can also:

• Increase conversion rates by keeping aCTA buttonvisible at all times (typically on the upper right-hand corner).
• 通过保持重要的链接范围来鼓励站点导航。
• 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 your初级和次要导航菜单— 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 position固定的。Follow the steps below.

1。Log into your WordPress dashboard.

2。Go toAppearance>Customize。

3。点击Additional 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。点击the bluePublishbutton.

7。刷新您的网站以查看您的粘性菜单。

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插件使您可以轻松添加粘性菜单，因为不需要编码体验。查看下面的三个插件以开始。

1.神秘性

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

使用mystickymenu创建一个粘性的纳维托：

• Install and activate the plugin.
• Go toSettings>神秘性。
• 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.
• 刷新您的网站以查看您的粘性菜单。

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>粘性菜单（或任何东西）。
• 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.
• 点击Save Settings。
• 刷新您的网站以查看您的粘性菜单。

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

显着主题可让您创建一个具有预构建布局的惊人网站。对于初学者设计师来说，这是直观的，但对于专家来说足够强大。借助其前端编辑，Google字体集成和演示进口商工具，您可以轻松设计具有用户友好型粘性菜单的网站。

最突出的模板有粘性的菜单lready 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的一次性费用

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 eachelement of your sticky menuto 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

无论您是通过使用CSS编码，安装插件或切换到提供选项的主题来创建粘性标头，都应牢记最佳实践。

Sticky Menu Best Practices

您的粘性纳维托应该使您的网站更容易使用，更难使用。请遵循以下技巧，使您的粘性菜单尽可能友好。

1. Customize your sticky menu colors to reflect your brand identity.

为了确保用户充分利用您的粘性菜单，您需要选择鼓励用户单击纳维尔（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.

但是，如果您没有安装允许您自定义粘性菜单颜色的主题，则可以使用WordPress的Live Customizer进行操作。就是这样：

• Log in to your WordPress admin dashboard.
• On the left-hand sidebar, go toAppearance, then clickCustomize。
• 点击Additional CSS。注意：请勿单击标题为“菜单”的侧边栏项目。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。
• 点击the button that says上传徽标。
• Choose an image from your local drive. While you do have the option of cropping it, you can also leave it as is.

确保徽标足够小，可以适合您的粘性菜单。否则，当用户滚动时，它将悬挂在边缘并模糊页面。我们建议对方徽标符号的尺寸小于100px x 100px。

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
• 帐户
• Search Button
• Shopping Cart Button

如果您是自由职业者，则可以在粘性菜单中包含以下项目：

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

无论您为哪种设备设计，导航菜单中最大化房地产都是必不可少的。但这是一个平衡的行为：您想有效地使用空间而不会损害用户体验。

您可以在仍满足访客期望的同时节省空间的一种方法是用放大镜图标代替搜索文本字段。这是双赢：喜欢搜索而不是浏览的访问者仍然可以选择这样做，现在您可以在菜单中添加另一个列表项目。

6. Add a hover animation to the menu.

虽然有些动画可能会分散注意力，但其他动画可以帮助改善您的网站导航。例如，当页面首次加载时，您可以使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.

如果您找不到主题的悬停动画设置，则是如何在使用CSS中添加它的方法：

• Log in to your WordPress admin dashboard.
• On the left-hand sidebar, go toAppearance, then clickCustomize。
• 点击Additional CSS。注意：请勿单击标题为“菜单”的侧边栏项目。此项目允许您自定义菜单列表项，而不是颜色。
• 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- 这样，您就不必从头开始这样做。拆分测试multiple variations of the menu before nailing down your final version.

如果您不想进行正式的拆分测试，则可以直播菜单的一个版本。如果您停止点击CTA按钮或跳出率增加，请在粘性菜单中更改单个元素。继续这样做，直到您将每个元素优化到字体大小为止。

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

在此示例中，购物应用程序希望使消费者轻松找到独特的时尚品牌。粘性菜单清楚地考虑到了这个目的。它提供了四个简单的导航链接来查找，发现和过滤品牌和产品。

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.

测验,成为客户

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.