如何在WordPress中创建粘性标头菜单或Navbar

Sticky menus (or navbars) are now a staple in网页设计。但是，当它们不是时，您必须一直滚动到顶部才能导航到另一页。自然，对于用户来说，这是不便和笨拙的。

粘性标头可提供无缝的用户体验，鼓励深入的现场导航，并帮助访客轻松找到所需的产品和服务，这将为您带来更多收入。

在本文中，我们将结束：

• What a sticky menu is，，，，
• How to create a sticky menu using CSS，，，，
• How to create a sticky menu with a plugin，，，，
• WordPress主题with built-in sticky menus,
• 粘性菜单最佳实践，，，，and
• Sticky navigation examples。

到本文结尾，您将能够使用内置粘性菜单选择完美的主题，或从头开始构建自己的菜单。让我们开始吧。

这是一个粘性菜单的示例，直接从HubSpot的博客主页：

如您所见，即使您向下滚动页面，您仍然可以访问营销，销售，服务和网站博客。您也可以订阅博客或启动集线器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网站。无论您是运行旅行博客，在线商店还是个人投资组合网站，都需要确保网站navigation让用户更容易找到他们需要的东西nd become subscribers or customers. Because good navigation enhances your user experience, you can improve dwell time, a critical SEO factor.

当访问者浏览您的网站时，您想为他们提供简单的内容。一些访问者发现，滚动回到页面顶部以浏览网站是繁重的。

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

使用粘性的Navbar，您也可以：

• 通过保持一个CTA button始终可见（通常在右上角）。
• 通过保持重要的链接范围来鼓励站点导航。
• Improvedwell time通过提供更多内容供用户消费。
• Give users an opportunity to find more products to buy, increasing revenue.
• Strengthen brand recognition by keeping your logo within view.

最好的部分是您可以为您的两个初级和次要导航菜单— no need to choose between the two.

您可以在网站上使用几种类型的粘性标头。让我们介绍可用的选项。

Types of Sticky Headers

您为网站选择的粘性标头类型取决于您当前的设计和您拥有的业务类型。大多数网站最好由顶级纳维托提供。但是，如果您是创意，那么您可以在安置中获得一些乐趣，并将其放在左右的位置。

• 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.
• 修复了右纳维托：您可以创建一个平台上的导航菜单ht 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.

现在，是时候在您的网站上设置粘性标头菜单了。如果您有技术技能，请从CSS方法开始。如果您不舒服地更改代码，则可以使用粘性导航插件。

如何在WordPress中创建CSS粘性磁带

要使用CSS创建粘性的NAVBAR，您需要手动将CSS代码添加到WordPress主题中。我们将使用该职位固定的。Follow the steps below.

1。登录您的WordPress仪表板。

2。去Appearance>Customize。

3。点击其他CSS。

看到笔Sticky Menu Codeby HubSpot (@HubSpot）onCodepen。

5。代替#website-navigationwith the CSS class or Id of your navigation menu. (Learn how to查找您的CSS课程或IDhere）

6。单击蓝色发布button.

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插件使您易于添加不现实ky menus, since no coding experience is required. Check out the three plugins below to get started.

1。神秘性

Mystickymenu是一个流行的插件，用于创建自定义粘性菜单。您的访问者将在不浪费时间浪费的情况下到达您的导航菜单。

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

• 安装并激活插件。
• 去Settings>神秘性。
• 在下面粘性课， 选择其他类或ID。
• In the box next to it, add your class or Id. (Learn how to查找您的CSS课程或IDhere.）

• Change any desired settings, like the background color or opacity.
• 向下滚动并单击绿色节省button.
• 刷新您的网站以查看您的粘性菜单。

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:

• 安装并激活插件。
• 去Settings>粘性菜单（或任何东西）。
• 在下面基本设置，添加您想要成为粘性菜单的导航栏。

• 更改任何所需的设置，例如页面顶部和粘性元素之间的空间。
• 点击保存设置。
• 刷新您的网站以查看您的粘性菜单。

3。Hero Menu

英雄菜单是用于创建响应式粘性菜单的优质WordPress插件。它的拖放构建器使您可以轻松地构建导航的各个方面。您还可以配置菜单的高度，颜色，透明度和字体，以适合您的网站。了解有关插件和设置过程的更多信息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是一个用于Elementor的模块库，也是同类模块中最受欢迎的插件之一。从数十个可自定义的小部件中进行选择，这些小部件无缝地符合您的Elementor界面，包括Mega Menus，定价桌和粘性标头。

ElementsKit提供了一个用于创建粘性内容的小部件，您可以在台式机和移动设备等不同设备上打开和关闭它。还有一个标题小部件，您可以轻松地使用样式选项制作粘性。

从开发人员那里查看此视频，以查看“行动”标题模块：

WordPress主题带有内置粘性菜单

SomeWordPress主题随身携带现成的粘性菜单。其他人则提供小部件，因此您可以通过单击按钮使菜单粘稠。无论哪种方式，您都不必担心添加代码或安装插件。

这是我们供您探索的主要建议。

1。Hello Elementor主题

Hello是一个干净，轻巧的主题，专门为Elementor（领先的WordPress页面构建器）设计。粘性标头菜单被列为其许多动态内容功能之一。你可以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： 自由的

2。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. 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。专业主题

图像源

专业主题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

图像源

X主题被认为是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粘性菜单的元素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。木星X

图像源

木星X提供350多个用于不同业务利基的预先建立的网站，包括公司，创意和非营利组织。您还可以从头开始创建自定义页面。无论是选择预设计的模板还是从头开始构建一个模板，创建粘性标头很简单。

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.

粘性菜单最佳实践

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

1.自定义粘性菜单颜色以反映您的品牌标识。

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.

要记住的最重要的事情是，您不应使用网站其余部分的完全不同的字体或颜色。您希望导航菜单仍然反映您的品牌。例如，您可能会将背景设置为透明，然后从您的链接上的配色方案中选择对比色的颜色。

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:

• 登录到您的WordPress管理仪表板。
• 在左侧侧边栏上，去Appearance，，，，then clickCustomize。
• 点击其他CSS。注意：请勿单击标题为“菜单”的侧边栏项目。It allows you to customize the menu list items, not the colors.
• An editor will come up. Copy and paste the code below.

看到笔Sticky Menu Codeby HubSpot (@HubSpot）onCodepen。

• 它在哪里说nav，为导航菜单放置实际的CSS ID或类。请注意，这可能是“ NAV”，因为这是标准的HTML元素。但是您的主题可能是为您的菜单使用另一个ID。（这是如何查找您的CSS课程或ID）
• 它在哪里说背景，，，，input your chosen background color.

We recommend using a tool such ascoolors.co找到适合您的颜色。您还可以将颜色设置为透明（RGBA（0,0,0,0））。

2。Add your brand’s logo.

将徽标添加到粘性菜单上是一种简单的方法，可以使您的品牌成为访问者浏览内容的最佳方式。这对于希望用户将特定图形标记或符号与其品牌相关联的企业特别有用。一个例子是Nike Checkmark耐克的粘性菜单：

请注意，Nike如何在菜单中不使用其品牌名称，当用户滚动滚动时，它会粘在屏幕的顶部。

以下是在WordPress中添加贴板图标的方法。

• 登录到您的WordPress管理仪表板。
• 在左侧侧边栏上，去Appearance，，，，then clickCustomize。
• 去Theme Options，，，，then click站点身份。
• 点击说明的按钮Upload logo。
• 从您的本地驱动器中选择图像。当您确实可以选择裁剪时，也可以像以前一样留下它。

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

如果您运行了一般业务网站，以下是您可以包括的菜单项的示例：

• Home
• 关于
• 服务
• Blog
• 联系或CTA按钮
• 搜索按钮

如果您是电子商务零售商，则是您可以包括的菜单项的一个示例：

• 类别1（例如“女人”）
• Category 2 (e.g. “Men”)
• 销售
• Account
• 搜索按钮
• 购物车按钮

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

• Home
• 恢复
• Portfolio
• Blog
• 与我联系或CTA按钮

4.为移动浏览器创建自定义粘性菜单。

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.在菜单中添加悬停动画。

虽然有些动画可能会分散注意力，但其他动画可以帮助改善您的网站导航。例如，当页面首次加载时，您可以使Navbar透明。这样，它就不会分散特色滑块或标题。

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.

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

• 登录到您的WordPress管理仪表板。
• 在左侧侧边栏上，去Appearance，，，，then clickCustomize。
• 点击其他CSS。注意：请勿单击标题为“菜单”的侧边栏项目。此项目允许您自定义菜单列表项，而不是颜色。
• An editor will come up. Copy and paste the code below.

看到笔Sticky Navbar Hover Colorby HubSpot (@HubSpot）onCodepen。

• 它在哪里说nav，为导航菜单放置实际的CSS ID或类。请注意，这可能是“ NAV”，因为这是标准的HTML元素。但是您的主题可能是为此元素使用另一个ID。（这是如何查找您的CSS课程或ID）
• 自定义背景和悬停颜色，直到获得所需的结果为止。

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.

尝试使用粘性菜单的变化，以找出最适合您的访问者的方法。更改颜色，字体大小，甚至菜单的位置。您可以使用一个A/B测试插件- 这样，您就不必从头开始这样做。拆分测试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 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.

粘性导航示例

吸引人的粘性菜单将帮助访问者浏览您的网站，并使他们与您的内容保持联系。使用下面的示例作为创建粘性菜单的创意提升。

Easy-to-Reach Filter and Discover Buttons

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

最小，优雅和干净

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 Quiz”按钮上，因此不会错过粘性的Navbar的房地产。在右上角，您诱使通过注册帐户开始赚取奖励。

垂直，几乎看不见

几乎看不见的垂直菜单使这个服装品牌看起来现代和最小。此菜单的小型类型和透明背景为用户提供了最低限度的最低限度，从而关注正在出售的产品。

跟随我们社交

该网站具有粘性的水平标头，在访问者滚动时，汉堡按钮后面倒塌了。在右上角，著名的社交按钮邀请您关注社交媒体上的出版物。

不是菜单的菜单

与上面的示例不同，此投资组合网站具有隐藏在汉堡按钮后面的粘性垂直导航菜单。它是如此的偏僻，几乎好像不存在。这种格式非常适合创意业务和投资组合网站。

创建自己的粘性导航菜单

通过保持固定且易于访问者的访问，无论他们在页面上滚动何处，粘性菜单都可以增强您的WordPress网站上的访问者体验。花一些时间创建粘性菜单，以改善网站的主要导航。无论您是使用CSS，插件还是带有内置粘性Navbar的主题，请务必遵循最佳实践，以便您的菜单使您的网站更易于使用并增加转换。

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