如何用 Divi 的全角菜单模块替换主菜单栏
已发表: 2018-08-29主菜单栏使访问者无缝导航。 除了我们在 WordPress 中习惯使用的默认主菜单栏外，您可能还遇到过 Divi 提供的全宽菜单模块。 通常，它用于在您的网站上显示与您在每个页面顶部的主菜单不同的其他菜单。
但是您也可以轻松地使用全角菜单模块来替换您的主菜单栏。 这使您可以自由地将菜单放置在页面上的任何位置，而无需处理页面顶部的重复菜单。 您还可以使用 Divi 的内置选项以您想要的方式设置菜单样式，例如，这意味着您可以使用边框和分隔线选项创建令人惊叹的结果。
在本教程中，我们将向您展示如何使用 Divi 的 Carpenter 布局包将主菜单栏替换为全角菜单模块。 这是我们正在进行的 Divi 设计计划的一部分。 您可以选择是要将此方法应用于所有页面还是仅应用于其中的几个页面。 让我们开始吧！
预览
在我们深入研究用例教程之前，让我们快速浏览一下不同屏幕尺寸的最终结果。
禁用固定导航栏
转到 Divi 的主题选项
我们需要做的第一件事是禁用 Divi 主题选项中的固定导航选项。 我们这样做是为了摆脱页面顶部的主菜单空间。 为此，请转到您的WordPress 仪表板 > Divi > 主题选项。
禁用固定导航栏
打开常规选项卡并禁用固定导航栏选项。
创建主菜单
前往菜单
接下来我们要做的是创建我们的主菜单。 我们将在顶部的默认主菜单栏和全角菜单模块中使用此主菜单。 要添加菜单，请转到WordPress 仪表板 > 外观 > 菜单。
添加新的主菜单
添加一个新菜单，为您的菜单命名并将其设为您的主菜单。
添加页面和保存菜单
最后但并非最不重要的是，添加所有页面并保存菜单。
主题定制器中的样式主菜单栏
转到主题定制器
根据您是否要在所有页面上隐藏默认主菜单栏，您可能希望首先设置默认主菜单栏的样式。 如果您计划在某些页面上使用它，则只需执行此操作。 如果你想在任何地方删除主菜单栏，你可以跳过这一步。
主菜单栏设置
为了匹配布局包，我们应用了以下更改：
- 字体样式：粗体和大写
- 文字颜色：#FFFFFF
- 活动链接颜色：#FFFFFF
- 背景颜色：#f25b3a
- 下拉菜单背景颜色：#f25b3a
隐藏主菜单栏
一页
转到选择页面并启用 Visual Builder
要隐藏页面顶部的主菜单栏，我们需要使用少量 CSS 代码。 请注意，禁用固定导航栏选项（前面的步骤之一）很重要。 否则，主菜单栏占用的空间将是白色的，并没有完全消失。 如果您打算在一个页面上隐藏主菜单栏，请转到该页面并启用 Visual Builder。
打开页面设置
单击页面底部的以下图标，打开页面设置：
添加 CSS 代码
切换到高级选项卡并将以下 CSS 代码添加到自定义 CSS 框中：
#main-header {
display: none;
}
整个网站
转到 Divi 的主题选项
如果您想摆脱整个网站上的主菜单栏，您也可以这样做。 您不必手动将代码添加到每个页面。 相反，您可以转到WordPress 仪表板 > Divi > 主题选项。
添加 CSS 代码
继续向下滚动，直到遇到自定义 CSS 框并在那里添加相同的 CSS 代码：
#main-header {
display: none;
}
将主菜单栏添加到页面
使用 Visual Builder 打开登陆页面
现在我们隐藏了主菜单栏，我们可以开始向我们的页面添加全角菜单模块。 为此，例如，转到您的登录页面并启用 Visual Builder。
添加全角部分
继续在您的英雄部分下方添加一个全角部分。
顶部边框
您可以使用 Divi 的所有内置选项来创建您想要的确切设计。 我们要保持它非常干净。 我们将添加到我们的部分选项的唯一内容是顶部边框：
- 顶部边框宽度：7px
- 顶部边框颜色：#f25b3a
添加全角菜单模块
接下来，将全角菜单模块添加到您的部分。
选择主菜单
选择您的主菜单作为您想要显示的菜单。
背景颜色
继续为您的模块提供黑色背景色。
链接设置
然后，打开链接设置并应用以下更改：
- 活动链接颜色：#FFFFFF
- 下拉菜单文本颜色：#FFFFFF
- 移动菜单文本颜色：#FFFFFF
- 文本方向：左
- 文字颜色：浅
下拉菜单设置
接下来更改下拉菜单设置：
- 下拉菜单背景颜色：#000000
- 下拉菜单行颜色：#000000
- 移动菜单背景颜色：#000000
菜单文字设置
最后，我们将使文本设置与布局包匹配：
- 菜单字体粗细：超粗
- 菜单字体样式：大写
使全角部分全局化并在其他页面上使用
另存为全局部分
我们已经完成了我们新的主菜单的创建！ 如果您还计划在其他页面上使用它，请继续将其作为全局项目添加到您的 Divi 库中。
添加到没有主菜单栏的其他页面
您现在可以轻松地将此全角菜单添加到其他页面。 您可以选择它的位置，并且可以随意使用随附的内置设计选项！
预览
现在我们已经完成了所有步骤，让我们最后看看在不同屏幕尺寸上的结果。
最后的想法
在此用例博客文章中，我们向您展示了如何使用全角菜单模块替换页面顶部的主菜单栏。 应用此方法可让您自由地将菜单放置在页面上的任何位置。 最重要的是，您还可以使用 Divi 的内置选项来设置样式。 如果您有任何问题或建议，请务必在下面的评论部分留言。