修复 Divi 中的响应式导航菜单

创建一个在所有屏幕尺寸上看起来都很棒的响应式导航菜单可能很困难。 我希望它不是那么重要，但由于导航通常位于您网站的每个页面的顶部，因此它是每个页面上最先可见的东西。 所以把它做好是很重要的。 值得庆幸的是，Divi 的主题定制器允许您使用一些非常酷的标题选项来定制主菜单。 但是对于带有左侧徽标和右侧菜单链接的默认菜单样式，在较小的屏幕尺寸上很容易乱七八糟，尤其是当您有太多链接挤满标题时。 我知道这对我来说经常发生。 我让菜单看起来很适合桌面，然后你在平板电脑（尤其是 iPad Pro）上检查它，标志与菜单重叠，一些链接跳到一行。

今天，我将为那些拥挤的导航菜单提供一些有用的解决方案，以便它们即使在不那么常见的屏幕尺寸上也能看起来很棒。 毕竟，至少对于某些用户而言，您网站的可信度取决于它。

让我们开始吧。

修复 Divi 中的响应式导航菜单

订阅我们的 YouTube 频道

导航菜单拥挤的四种解决方案

Divi 的一大优点是它建立在流体网格布局上，该布局使用媒体查询（分隔 CSS）来调整您网站的样式以适应不同的屏幕尺寸。 进行这些调整的点就是我们所说的断点。 如果您致力于在所有屏幕尺寸上完善您的主导航菜单，您可能需要使用媒体查询自定义菜单并调整某些断点。

问题

我在使用 Divi 的默认导航菜单时遇到的最常见问题是客户想要很多顶级菜单项。 主导航菜单上的菜单项超过 5 个（或具有大字体的菜单项）通常会在屏幕尺寸达到 980-1100 像素（小型笔记本电脑的尺寸）之间时产生换行和放大的标志和大药片）。 我相信您以前遇到过这个问题，即使您从未注意到它。 它看起来像这样：

不理想。 那么让我们来看看这个问题的四种解决方案。

解决方案#1：使菜单栏全宽

通常我不建议将导航菜单设为全角，除非我也将网站的其余部分设为全角。 我认为设计的一致性很重要。 但有时，如果这意味着您的导航菜单在所有设备上看起来都很棒，那么这是一个很好的妥协。 这也是一个简单的修复。

转到Theme Customizer > Header & Navigation > Primary Menu Bar并选择Make Full Width 。

解决方案#2：调整徽标和字体设置。

解决您问题的另一个简单方法是使用主题定制器设置来调整默认的徽标最大高度、文本大小或字体选项。

调整这些选项时要小心，因为您永远不想为了轻松修复而损害徽标或菜单项的设计和可读性。

解决方案#3：在新断点处显示移动菜单。

以下是 Divi 中每个断点的一般范围：

大桌面：1405px 及以上
标准桌面：介于 1100 像素和 1405 像素之间
笔记本电脑和大型平板电脑：介于 980 像素和 1100 像素之间
平板电脑：介于 768 像素和 980 像素之间
智能手机和小型平板电脑：320px 到 768px 之间；
智能手机：320px 到 480px 之间；

默认导航菜单变成移动菜单（带有汉堡导航）的断点是 980px。 任何小于 980 像素的屏幕尺寸都将显示移动菜单。

但是，如果您想避免任何奇怪的菜单换行符，请将断点更改为不同的值。 假设您希望以 1024 像素左右而不是 980 像素显示移动菜单。 为此，您需要在媒体查询中插入一些自定义 CSS 以覆盖 Divi 中的默认样式。

转到Theme Customizer > Additional CSS并输入以下内容：

@media (max-width: 1024px) {
 #et_mobile_nav_menu {
 display: block;
 }

#top-menu {
 display: none;
 }
 }

这个媒体查询做两件事。 它隐藏常规菜单并在 1024px 断点处显示移动菜单。

解决方案#4：在某个断点处调整菜单样式

此解决方案可能是最佳选择，因为它允许您在某些断点处对菜单进行最大程度的控制。 您可以通过使用它们的 css 类来定位您的菜单项，以在您的媒体查询中创建自定义样式。

以下是 Divi 菜单项的默认 CSS：

#top-menu li {
    display: inline-block;
    padding-right: 22px;
    font-size: 14px;
}

假设您希望菜单字体大小默认为 18 像素，但您希望它在某个断点处更改为 14 像素。 为了节省更多空间，您可以将内边距减少到 15 像素而不是 22 像素。 您可以通过将所有菜单项的 css 类作为目标并创建媒体查询来做到这一点

转到Theme Customizer > Additional CSS并输入以下内容：

@media (max-width: 1200px) {
 #top-menu li, #top-menu li a {
 font-size: 14px;
 padding-right: 15px;
 }
 }

这个 CSS 所做的是在任何 1200 像素或以下的屏幕上将字体大小更改为 14 像素，并将右内边距更改为 15 像素。 这会在桌面上调整屏幕大小时创建平滑过渡，并允许您在大型平板电脑和小型笔记本电脑上保持默认导航。

调整其他标题样式

Divi 的主题定制器中有五种标题样式可供选择（不包括垂直导航）。 这五种样式包括默认（本文中已经提到的样式）滑入式、全屏、居中和居中内联徽标。

滑入和全屏样式

如果您的网站设计要求幻灯片样式或全屏样式，那么您的响应式菜单几乎是万无一失的，因为移动导航汉堡包图标用于在所有屏幕尺寸上触发菜单。

居中风格

如果您使用居中样式，您有更多空间供菜单项呼吸，但如果您仍然需要更多空间，您可以使用我们用于默认样式的相同自定义解决方案，使其看起来像您想要的那样。

居中内联标志样式

最后，居中的内联徽标样式标题从一开始就有点棘手。 如果您希望徽标位于页面中央，您需要做一些正确的事情。 首先，您需要有偶数个菜单项，这样中间的标志仍然是核心。

其次，您为每个菜单项使用的文本量将决定徽标的中心点。 如果一侧有更多文字，则徽标会稍微偏离。 在大多数情况下，这不是什么大问题，但是如果您在徽标正下方有一个带有居中元素的标题，这可能是一个明显的问题，您需要纠正。

请注意，与标题部分中的居中标志相比，菜单中的标志是如何偏离居中的。

现在我要将菜单项标签“信息元素”缩短为“信息”。 现在看看徽标如何更多地向中心移动。

此解决方案可能是您在所需位置获取徽标所需的全部。 您可以将诸如“关于我们”之类的内容更改为“关于”，反之亦然，以进行这些小调整。

但是，如果您是一个完美主义者，这可能会有点令人沮丧（我可以拥有自己的时刻。相信我。）因此，如果您想进行更多调整，则可以进行更深层次的定制。 除了调整菜单项中的实际文本来调整徽标的中心点之外，您还可以向任何项目添加自定义 css 类并为其提供一些右侧或左侧的填充。 这应该给你最后的推动，你需要让一切都集中起来。

从 wordpress 仪表板转到 Appearance > Menus 并确保您在 Screen Options 区域中选中了 CSS Classes。

然后切换打开您想要定位的菜单项。 然后在 CSS Classes 输入框中输入一个 CSS 类。 我称我的为“轻推”。

之后，转到Divi > Theme Customizer > Additional CSS并添加以下自定义 CSS：

#top-menu li.nudge  {
padding-right: 32px;
}

使用这个 css，只有类“nudge”的项目才会被赋予 32px 的右内边距； 这将徽标推到足以使其居中的位置。

就是这样！

闭幕式

Divi 让构建网站变得轻松有趣。 但有时，工作（和我们的客户）的要求要求我们加倍努力以确保我们的网站是一流的。 好网站和好网站的区别在于小细节。 响应式导航菜单的执行方式是您想要正确处理的重要细节之一。 大多数情况下，这是您的用户在您网站的每个页面上首先看到并与之互动的内容。 破损的菜单会给人留下不好的第一印象。 我希望这篇文章能帮助“推动”你朝着正确的方向前进（对不起，我无法帮助自己:)）。

我确信还有更多的问题和解决方案我没有在这篇文章中提到。 随意在评论中发布它们。 我期待着您的回音。

干杯!