如何在 WordPress 中创建粘性浮动导航菜单

最近，我们的一位用户问我们如何为他们的网站创建粘性导航菜单?

当用户向下滚动页面时，粘性导航菜单会保留在屏幕上.这使得顶部菜单始终可见，这有利于用户体验，因为它包含指向您网站最重要部分的链接.

在本文中，我们将向您展示如何在 WordPress 中轻松创建粘性浮动导航菜单.

什么是粘性浮动导航菜单?

粘性或浮动导航菜单是在用户向下滚动时"粘"在屏幕顶部的菜单.这使您的菜单始终对用户可见.

这是一个正在运行的粘性菜单.我们将向您展示如何为您自己的网站创建与此完全相同的菜单:

粘性菜单为何以及何时有用?

通常，顶部导航菜单包含指向网站最重要部分的链接.浮动菜单使这些链接始终可见，从而避免用户滚动回到顶部.它也被证明可以增加转化率.

如果您经营在线商店，那么您的顶部导航菜单可能包含指向购物车、产品类别和产品搜索的链接.使此菜单具有粘性，可以帮助您减少购物车放弃并增加销售额.

一些最好的 WordPress 主题内置了对粘性导航菜单的支持.只需在 Themes » 下查看您的主题设置.自定义以启用此功能.

如果您的主题没有此选项，请继续阅读，我们将向您展示如何在任何 WordPress 主题或 WooCommerce 商店中轻松创建粘性浮动导航菜单.

方法 1:使用插件添加粘性浮动导航菜单

这是最简单的方法.我们向所有 WordPress 用户推荐它，尤其是初学者.

如果您尚未设置导航菜单，请继续按照我们关于如何在 WordPress 中添加导航菜单的说明进行设置.

之后，您需要在 Scroll 插件上安装并激活粘滞菜单(或任何东西！).有关更多详细信息，请参阅有关如何安装 WordPress 插件的分步指南.

激活后，您需要访问设置»用于配置插件设置的粘性菜单(或任何东西！) 页面.

首先，您需要输入要粘贴的导航菜单的 CSS ID.

您需要使用浏览器的检查工具来查找导航菜单使用的 CSS ID.

只需访问您的网站并将鼠标移至导航菜单即可.之后，您需要右键单击并从浏览器的菜单中选择"检查".

这将拆分您的浏览器屏幕，您将能够看到导航菜单的源代码.

您需要找到一行与您的导航或站点标题相关的代码.它看起来像这样:

<nav id="site-navigation" class="main-navigation" role="navigation">

如果您很难找到它，请将鼠标光标放在"检查"窗格中的不同代码行上.当您有正确的代码行时，导航菜单将完全突出显示:

在这种情况下，我们导航菜单的 CSS ID 是 site-navigation.

您需要做的就是在插件设置中输入菜单的 CSS ID，并在开头加上一个哈希值.在这种情况下，就是 #site-navigation.

不要忘记点击页面底部的"保存更改"按钮.

现在，继续在您的 WordPress 网站上实时查看您的粘性菜单.当您向下滚动时，它应该留在页面上，如下所示:

插件设置页面上的下一个选项是定义屏幕顶部和粘性导航菜单之间的空间.仅当您的菜单与您不想隐藏的元素重叠时，才需要使用此设置.如果不是，则忽略此设置.

我们建议选中选项旁边的复选框:"检查管理栏".这允许插件为 WordPress 管理栏添加一些空间，该空间仅对登录用户可见.

在这里，您可以看到我们测试站点上的管理栏正确显示在粘性菜单上方:

如果用户使用较小的屏幕(例如移动设备)访问您的网站，则下一个选项允许您取消导航菜单:

您可以测试您的网站在移动设备或平板电脑上的显示效果.如果您不喜欢它的外观，只需为此选项添加 780px.

在对选项进行任何更改后，不要忘记单击"保存更改"按钮.

方法二:手动添加粘性浮动导航菜单

此方法要求您向主题添加自定义 CSS 代码.我们不建议初学者使用.

我们还建议您在开始之前查看我们的指南，了解如何轻松地将自定义 CSS 添加到您的 WordPress 网站.

首先，您需要访问外观»自定义以启动 WordPress 主题定制器.

接下来，单击左侧窗格中的"Additional CSS"，然后添加此 CSS 代码.

#site-navigation {
    background:#00000;
    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;
}

注意:这将生成一个黑色背景的导航菜单.如果您想要不同的颜色，请更改 background 旁边的数字.例如，使用 background: #ffffff 会给你一个白色的菜单背景.

只需将 #site-navigation 替换为导航菜单的 CSS ID，然后单击屏幕顶部的"发布"按钮.

继续访问您的网站，查看您的粘性浮动导航菜单:

如果您的导航菜单通常出现在网站标题下方而不是上方怎么办?如果是这样，则此 CSS 代码可能会与站点标题和标题重叠，或者在用户滚动之前显得过于靠近:

这可以通过使用一些额外的 CSS 代码向标题区域添加边距来轻松调整:

.site-branding {
margin-top:60px !important;
}

将 site-branding 替换为标题区域的 CSS 类.现在，在用户向下滚动之前，粘性导航菜单将不再与您的标题重叠:

我们希望本文能帮助您向 WordPress 网站添加粘性浮动导航菜单.您可能还想查看我们的指南，了解如何在不编写任何代码的情况下创建自定义 WordPress 主题，以及我们对最佳 WordPress 页面构建器插件的比较.