如何匹配桌面和移动菜单

已发表: 2021-05-20

你想在桌面和移动设备上都有一个很棒的菜单吗？我们已经为您服务了。在本指南中，我们将向您展示如何匹配 WordPress 网站的桌面和移动菜单。

近年来，使用移动设备浏览互联网的人数不断增加。但是，并非所有网站都旨在为用户提供良好的移动体验。为了跟上时代的步伐并充分利用您的移动访问者，您应该确保您的网站在移动设备上的响应速度与在桌面屏幕上一样。

在向您展示如何匹配桌面和移动菜单之前，让我们先看看为什么具有相同的设计是一个好主意。

为什么要匹配您的桌面和移动菜单？

尽管用户通过手机浏览互联网越来越普遍，但并非所有网站都旨在为移动用户提供良好的体验。为确保您的网站易于在任何设备上浏览，您应该匹配您的桌面和移动菜单，使其在每个屏幕上看起来都很吸引人。

目前，大多数网站都有在桌面屏幕上看起来不错的标题菜单。但是，在移动屏幕上不会发生同样的情况。许多网站所有者使用移动设备的默认选项，因此菜单通常看起来不太好。

让我们看一个例子。假设您的网站在桌面上有一个标准菜单，高度为 30 像素，徽标的最大高度为 100 像素。

如何匹配桌面和移动菜单 - 桌面

如果您在移动设备上检查相同的菜单而不进行任何更改，它将看起来像这样。

如何匹配桌面和移动菜单 - 移动

如您所见，它相当大，将占据近 20% 的屏幕。好消息是您可以进行一些调整以匹配桌面和移动菜单，因此后者将如下所示：

如果您想在任何尺寸的屏幕上为用户提供出色的体验，则必须匹配桌面和移动菜单。此外，美观且响应迅速的网站还可以帮助他们浏览您的网站并增加参与度。

现在您更好地理解了为什么需要匹配桌面和移动菜单，让我们看看如何做到这一点。

如何在 WordPress 中匹配您的桌面和移动菜单

匹配您的桌面和移动菜单并不是一个复杂的过程。您需要做的就是按照我们将在下面看到的步骤。请记住，我们将使用一些 CSS 代码来设置菜单样式，但即使您没有编码技能，您也可以按照指南进行操作。

在本教程中，我们将使用 Divi 主题，因为它是 WordPress 中响应速度最快、易于使用且功能最丰富的主题之一。某些界面可能会根据您用于网站的主题而有所不同，但您应该能够将大部分更改应用于任何主题。

1. 配置菜单

要匹配桌面和移动菜单，您应该做的第一件事是配置菜单。这对于大多数主题都是一样的。在这里，我们将调整菜单和徽标的高度。

在您的 WordPress 仪表板中，转到外观 > 自定义。 您将被重定向到主题定制器，您需要在其中打开Header & Navigation > Primary Menu Bar 。

然后，确保禁用并取消选中隐藏徽标图像选项并调整菜单的高度和徽标的最大高度，如下所示：

菜单高度：30
标志最大高度：100

主菜单栏匹配桌面和移动菜单

这将降低桌面和移动菜单的高度，使其更加优雅并在移动屏幕上创造更多空间。

设置值后，发布它。

2. 用 CSS 编辑菜单

配置好 logo 和菜单后，您可以开始使用 CSS 编辑菜单。您可以通过多种方式将 CSS 添加到 WordPress 以匹配桌面和移动菜单。您可以将它们添加到单个特定页面或整个网站。

为了保持设计一致，我们建议您将菜单上的 CSS 更改应用到整个网站。但是，如果需要，您也可以在特定网页上包含 CSS 代码。我们将在下面向您展示这两个选项。

在我们开始之前，最好备份您的 WordPress 网站。我们将向该站点添加一些代码行，因此如果您想返回到您网站的先前版本，那么拥有最近的备份总是很方便的。

2.1。将 CSS 代码添加到单个页面

要添加 CSS 代码以匹配特定页面的桌面和移动菜单，请从 WordPress 仪表板打开该页面。

然后，使用Divi Builder打开页面并单击页面底部的选项按钮（3 个水平点）。 在那里您将看到页面选项。单击“设置”图标以打开“页面设置”，转到“高级”选项卡，然后按“自定义 CSS”。

之后，添加以下 CSS 代码并单击对勾进行保存。

 @media（最大宽度：980px）{
# 页面容器 {
填充顶部：43px！ 重要的;
}
}
@media（最大宽度：980px）{
＃标识 {
最大宽度：100%！ 重要的;
最大高度：90%！ 重要的;
}
}
@media（最大宽度：980px）{
#mainheader {
最高：4%！ 重要的;
}
}
@media（最大宽度：980px）{
# et-top-navigation {
填充顶部：5px！ 重要的;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
底部填充：5px；
}

代码源

您可以使用构建器中提供的预览模式比较桌面和移动设备之间的结果。您将在屏幕左下方看到选项。

移动视图 divi builder 匹配桌面和移动菜单

2.2. 将 CSS 代码添加到整个网站

或者，您可以添加 CSS 代码并将其应用于整个网站。这是最常用的技术，因为它将帮助您保持整个站点的一致性，并匹配每个页面上的桌面和移动菜单。

为此，您可以通过两种不同的方式添加自定义 CSS：

使用主题定制器
从主题选项（如果您使用 Divi）

让我们看看这两个选项。

一世。主题定制器

在您的 WordPress 仪表板中，转到外观 > 自定义并打开主题定制器。 然后，转到附加 CSS选项卡。

粘贴以下 CSS 代码并发布。

 @media（最大宽度：980px）{
# 页面容器 {
填充顶部：43px！ 重要的;
}
}
@media（最大宽度：980px）{
＃标识 {
最大宽度：100%！ 重要的;
最大高度：90%！ 重要的;
}
}
@media（最大宽度：980px）{
#mainheader {
最高：4%！ 重要的;
}
}
@media（最大宽度：980px）{
# et-top-navigation {
填充顶部：5px！ 重要的;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
底部填充：5px；
}

代码源

粘贴 CSS 代码后，您还可以调整值以满足您网站的要求。确保移动菜单和徽标之间的顶部填充正确对齐。如果您不确定正确的值应该是多少，请从较高的值开始并减少它们，直到您对结果满意为止。

这种方法的好处是您可以从 Theme Customizer 预览桌面和移动设备的结果。预览模式选项将出现在屏幕的左下方。

移动视图定制器匹配桌面和移动菜单

ii. 主题选项

或者，如果您使用 Divi，您可以使用主题选项将 CSS 代码添加到您的整个网站。这可能是一种更简单、更快捷的方法，因为您不需要加载主题定制器来添加代码。

首先，进入Divi > Theme Options并打开General 标签。 然后，向下滚动到页面底部，您将找到Custom CSS 。

再次，将以下代码添加到文本框中，如屏幕截图所示并保存更改。

 @media（最大宽度：980px）{
# 页面容器 {
填充顶部：43px！ 重要的;
}
}
@media（最大宽度：980px）{
＃标识 {
最大宽度：100%！ 重要的;
最大高度：90%！ 重要的;
}
}
@media（最大宽度：980px）{
#mainheader {
最高：4%！ 重要的;
}
}
@media（最大宽度：980px）{
# et-top-navigation {
填充顶部：5px！ 重要的;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
底部填充：5px；
}

请记住，这只是示例代码，因此您可能需要对其进行调整以匹配您网站的设计。

移动菜单的一些附加提示

我们刚刚了解了如何轻松匹配您网站上的桌面和移动菜单。但是您可以做更多的事情来自定义您的移动菜单。在本节中，我们将向您展示一些您可以执行的最常见的自定义设置，以充分利用您的菜单。

请记住，我们在本教程中使用了 Divi 主题，因此根据您使用的主题，某些选项可能会略有不同。

1.如何使移动菜单固定

您可以对移动菜单进行的最佳修改之一是在用户在您的网站上滚动时将其固定。这可以改善导航并改善您网站上的用户体验。

要固定移动菜单，请在Theme Customizer或Theme Options中添加以下 CSS 代码。

 @media（最大宽度：980px）{
.et_non_fixed_nav.et_transparent_nav # main-header, .et_non_fixed_nav.et_transparent_nav # top-header, .et_fixed_nav # main-header, .et_fixed_nav # top-header {
定位：固定！ 重要的; }}

有关如何在 Divi 中使菜单具有粘性的更多信息，请查看本指南。

2.为移动模式添加不同的标志

如果您很难获得正确的值以使您的移动菜单完美对齐，这将很有用。您可以简单地替换原始徽标，并在移动设备上使用尺寸更合适的不同徽标。

要在移动设备上使用不同的徽标，首先，在您的网站上上传徽标图像。转到媒体 > 添加新的并上传您的图像。

添加新的媒体匹配桌面和移动菜单

然后，前往库选项卡并选择图像。 如果您已经上传了图片，您只需打开Media > Library 。

现在选择图像并复制文件 URL 。

最后，在附加 CSS 下的主题定制器上添加以下自定义 CSS并发布。请记住将 URL 替换为您刚刚复制的 URL。

 @media only screen and (max-width: 981px) {
/* 将手机标志更改为指定图片 */
＃标识 {
内容：网址（“http://site.com/logo.png”）；
}
}

3.在移动标题中隐藏徽标

如果您在匹配桌面和移动菜单时遇到问题，您可能希望使它们不同，并在移动设备上完全隐藏徽标。对于某些网站来说，这可能是一个不错的选择，但请确保您提供其他提示，以便用户即使没有徽标也能识别您的网站。

要从移动菜单中隐藏徽标，请在您的 WordPress 仪表板中转到外观 > 自定义并打开主题定制器。然后，导航到Mobile Styles > Mobile Menu 。 检查隐藏徽标图像选项并发布它。

隐藏徽标匹配桌面和移动菜单

而已！徽标将隐藏在移动设备上。

结论

总而言之，您的网站必须看起来不错并且可以在任何类型的设备上运行，这一点至关重要。匹配的桌面和移动菜单将使您能够改进网站的导航并为访问者提供更好的体验。

在本指南中，我们向您展示了在桌面和移动设备上拥有相同菜单的不同步骤。我们已经了解了如何为单个页面或整个网站使用 CSS 配置和编辑它。

此外，我们还为您提供了一些自定义移动菜单的提示。考虑到互联网上近一半的流量是移动的，这可能会对您的网站产生重大影响。

如果您想了解有关 Divi 主题或构建器的更多信息，可以查看以下指南：

如何使用 CSS 自定义 Divi 菜单
制作一个 Divi 标题（粘性/修复）
如何在 Divi 中隐藏和删除页脚

您是否匹配了您网站上的桌面和移动菜单？您在学习本教程后有任何问题吗？在下面的评论部分让我们知道！