如何使 Divi 网站上的标准和垂直导航重叠

在这篇文章中，我们将向您展示如何结合标准导航和垂直导航。 进一步来说; 如何使二级菜单和页脚与您网站上的垂直导航重叠。 这意味着您不必在顶部导航或垂直导航之间做出选择； 你可以两者兼得！ 您可以在主题定制器中随意设置主菜单和二级菜单的样式，这不是我们将在本文中明确帮助您实现的目标。 我们宁愿向您展示以下有助于完成以下事情的事情：

• 如何让你的二级菜单与你的垂直导航重叠
• 如何在滚动时固定二级菜单
• 如何使页脚与垂直导航重叠

这些都是可以帮助您在网站上的标准导航和垂直导航之间建立良好平衡的东西。 通过使标准导航和垂直导航重叠，您的网站不会感觉它被垂直导航所支配。 您网站上的主要内容将自行调整为垂直导航，但二级菜单和页脚的行为方式与未启用垂直导航时的行为方式相同。

结果

在本教程结束时，您将能够在使用垂直导航的网站上获得以下结果：

重叠标准和垂直导航的灵感

在上一篇文章中，我们分享了一些使用垂直导航的网站示例。 所有示例都向我们展示了使用不常用的 Divi 选项可以获得多大的创意。 您网站上经过深思熟虑的垂直导航可以提供您试图与访问者实现的额外互动。

在展示示例时，有一些评论激励我们向您展示如何实现某些结果。 这篇文章是那些基于灵感的教程之一，它将向您展示如何对您的网站进行一些调整，而无需自己搜索解决方案。

我们受到了 Alex Brands 网站的启发，该网站使用顶部的二级菜单和页面左侧的垂直导航。

滚动时，二级菜单随之滚动。 它为网站提供了额外的小触感，有助于将注意力集中在二级菜单中的内容上。 Alex Brands 是一个电子商务网站，固定的二级菜单有助于提醒人们购物篮中有什么以及他们提供的交易。

这种垂直导航对于电子商务网站来说尤其有趣。 垂直导航使访问者可以轻松浏览网站上提供的不同类别的项目。 当菜单项位于垂直导航中时，更容易遵循菜单项，因为它更容易解释为人们必须浏览的列表。

如何使 Divi 网站上的标准和垂直导航重叠

订阅我们的 YouTube 频道

一般步骤

在深入了解向您展示如何使标准导航与垂直导航重叠的部分之前，我们将首先完成一般步骤。 这些一般步骤是您在应用重叠之前需要完成的基础。

没有任何进一步的到期； 让我们开始吧。

创建您的菜单并添加菜单项

您需要做的第一件事（如果您还没有这样做的话）是向您的网站添加菜单和菜单项。 这些是将出现在垂直导航中的菜单项。 要向您的网站添加新菜单，请转到您的WordPress 仪表板 > 外观 > 菜单。 进入该页面后，为新菜单命名并创建菜单。

继续添加菜单项并将其设为主菜单。

将社交图标添加到二级菜单

您需要做的下一件事是激活您的二级菜单。 为了确保二级菜单出现在您的网站上，您的二级菜单必须有一个被激活的元素。 在这篇文章中，我们只会添加社交媒体图标，但您当然可以添加任何您喜欢的图标。

要激活二级菜单并显示社交图标，请首先转到您的WordPress 仪表板 > 自定义 > 标题和导航 > 标题元素 > 启用“显示社交图标”选项。

激活垂直导航

您需要采取的下一步是在 Divi 构建器中启用垂直导航。 为此，请转到您的WordPress 仪表板 > 外观 > 自定义 > 标题和导航 > 标题格式 > 启用垂直导航。

除此之外，您还可以选择您希望垂直导航出现的位置； 在您网站的左侧或右侧。

禁用主菜单的固定导航

在我们进行高级修改之前，还有最后一件事要做：禁用主菜单的固定导航。 如果您已禁用主菜单，请跳过此步骤。 但是，如果您的主菜单当前已修复，请转到您的WordPress 仪表板 > Divi > 主题选项 > 并禁用固定导航。

结合标准和垂直导航

在这篇文章的下一部分中，我们将向您展示如何使您的标准和垂直导航变得与平常不同。 当谈到垂直导航时，我们习惯于看到屏幕的一部分被它覆盖。 二级菜单和页脚默认不会通过垂直导航。

但在某些情况下，我们希望确保辅助导航和页脚位于垂直导航的顶部。 这样，唯一依赖于垂直导航的就是主要内容。 您的网站不会感觉它完全分为两个地方； 垂直导航和网站的其余部分。

将 CSS 代码添加到主题选项

您可以通过两种方式添加 CSS 代码：通过 Divi 的主题选项或通过主题定制器。 要将代码添加到主题选项，请转到您的WordPress 仪表板 > Divi > 主题选项 > 常规 > 向下滚动选项卡并将以下 CSS 代码行粘贴到自定义 CSS 框中：

@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {
margin-left: 0 !important; 
z-index: 10000;
position: fixed;
width: 100%;
}
.et_vertical_nav #main-header {
position: absolute;
z-index: 1!important;
overflow: hidden;
}
#et-main-area {
width: auto !important;
}
#main-footer {
margin-left: -225px !important;
left: 0 !important;
z-index: 1000 !important;
position: absolute;
width: 117.4%;
height: auto;
}}

将 CSS 代码添加到主题定制器

另一种可能性是将 CSS 代码行添加到主题定制器。 为此，请转到您的WordPress 仪表板 > 外观 > 自定义 > 附加 CSS > 并将 CSS 行粘贴到自定义 CSS 字段中：

@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {
margin-left: 0 !important; 
z-index: 10000;
position: fixed;
width: 100%;
}
.et_vertical_nav #main-header {
position: absolute;
z-index: 1!important;
overflow: hidden;
}
#et-main-area {
width: auto !important;
}
#main-footer {
margin-left: -225px !important;
left: 0 !important;
z-index: 1000 !important;
position: absolute;
width: 117.4%;
height: auto;
}}

最后的想法

在这篇文章中，我们向您展示了如何在您的网站上结合标准导航和垂直导航。 更确切地说; 我们已经向您展示了如何使二级菜单和页脚与垂直导航重叠，以及如何修复二级菜单。 如果您有任何问题或建议； 随时在下面的评论部分发表评论！

请务必订阅我们的电子邮件通讯和 YouTube 频道，这样您就不会错过重大公告、有用提示或 Divi 免费赠品！

Line design 的特色图片/shutterstock.com