延庆做网站公司：如何使Divi网站的标准导航和垂直导航重叠

在这篇文章中，我们延庆做网站公司将向您展示如何将标准导航和垂直导航结合起来。更具体地说，如何使辅助菜单和页脚重叠垂直导航在您的网站上。这意味着您不必在拥有顶级导航和垂直导航之间进行选择；您可以两者都做！您可以在主题定制器中设置主菜单和辅助菜单的样式，这不是我们在这篇文章中显式地帮助您实现的。我们将向你们展示以下在做以下事情过程中有帮助的东西：

· 如何使辅助菜单与垂直导航重叠

· 如何在滚动时使二级菜单修复

· 如何使页脚重叠垂直导航

这些都会帮助你在网站的标准导航和垂直导航之间建立一个很好的平衡。通过使标准导航和垂直导航重叠，您的网站不会觉得它被垂直导航所主导。您的网站上的主要内容将调整自己的垂直导航，但次要菜单和页脚将以同样的方式，它的行为时，垂直导航是不启用的。

结果

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

重叠标准与垂直导航的启示

在以前岗，我们分享了一些使用垂直导航网站的例子。所有的例子都向我们展示了一个不是经常使用的Divi选项是多么的有创意。一个经过思考的垂直导航在你的网站上，可以提供额外的互动，你试图实现与你的访问者。

在展示这些例子的同时，也有一些评论启发了我们向你们展示如何取得某些成果。这篇文章是基于灵感的教程之一，它将向您展示如何对您的网站进行一些调整，而不必自己搜索解决方案。

我们的灵感来自亚历克斯·布兰兹网站，在页面顶部使用辅助菜单，在页面左侧使用垂直导航。

滚动时，次级菜单滚动。它提供了一个很好的额外接触网站，它有助于保持重点在第二菜单内的内容。亚历克斯·布兰兹(AlexBrands)是一个电子商务网站，固定的二级菜单有助于提醒人们购物篮中的内容以及他们提供的交易。

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

如何使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;

}}

最后思想

在这篇文章中，我们延庆做网站公司向您展示了如何在您的网站上结合标准导航和垂直导航。更准确地说，我们已经向您展示了如何使辅助菜单和页脚重叠您的垂直导航，以及如何使您的辅助菜单固定。如果您有任何问题或建议，请在下面的评论部分留下评论！