创建菜单并添加链接后，您可能还想定制菜单的外观。本指南将介绍菜单设计方面的常见更改方法。
如果您使用的是站点编辑器主题，可以通过仪表盘中的外观下的编辑器全面定制站点的菜单样式。经典主题在仪表盘中外观下的定制器中提供有限的菜单设计选项。
要确定应参考本指南的哪个部分，请访问您的 WordPress.com 仪表盘，查看左侧的外观菜单。如果您看到编辑器，请使用本指南的站点编辑器部分。否则，请使用定制器说明。
如果您的主题使用站点编辑器（即仪表盘中有外观 → 编辑器），您可以按照以下步骤，通过导航区块设置来控制菜单设计：
- 在您站点的仪表盘中，前往外观 → 编辑器。
- 点击模板，然后选择一个包含菜单的模板，例如“首页”或“前页”。
- 打开屏幕左上角的列表视图（图标看起来像三条上下排列的水平线）。
- 在列表视图中选择导航区块。
- 在屏幕右侧查看导航区块的设置。
- 您可以在“设置”或“样式”选项中定制导航区块的外观。
设置和样式
- 点击保存按钮，保存您的更改。
在列表视图中选择导航区块
请参阅我们的导航区块设置指南，了解每项设置的使用方法，包括：
部分未使用站点编辑器的主题会在外观 → 定制器中提供有限的菜单颜色选项。要查看这些颜色选项，请按照以下步骤操作：
- 访问您站点的仪表盘。
- 转到外观 → 定制器。
- 选择“颜色和背景颜色”，您可能会看到一系列圆圈。每个圆圈决定了站点中各种元素的颜色，例如链接颜色和背景颜色。
- 每个经典主题提供的选项各不相同。并非所有主题都包含颜色圆圈，有些主题可能针对不同元素提供不同的颜色设置。
- 选择一种新颜色，右侧的预览窗口会显示它在您站点上的效果。
- 如果您对结果满意，请点击“保存更改”按钮，将新颜色应用到您的站点。
定制器中的颜色和背景颜色。
如果此处的选项无法满足您对颜色的需求，请查看我们完全可定制的站点编辑器主题。
本视频演示了如何访问导航区块并更改设置和样式。此功能在我们完全可定制的站点编辑器主题中可用。点击播放按钮后，您可以使用右下角的控件来减慢或加快视频播放速度。
WordPress 智能体可以直接帮您调整菜单的外观和行为。以下是一些您可以让它完成的操作示例：
- “将我的导航菜单颜色更改为与品牌一致的颜色。”
- “将下拉菜单设置为点击时打开，而不是悬停时打开。”
- “让我的菜单在所有屏幕尺寸上都显示为汉堡菜单。”
- “为‘联系我们’菜单项添加一个名为 ‘featured-link’ 的 CSS 类。”
使用任何站点编辑器主题时，您都可以调整菜单的位置。站点编辑器主题通过外观中的编辑器让您完全控制布局，包括站点的菜单位置。
虽然站点编辑器主题中的菜单位置完全可定制，但您可能希望先找一个菜单位置符合您喜好的主题。进一步了解如何切换主题。
如果您已经选择了想要使用的站点编辑器主题，并希望更改菜单的显示位置，您有以下几种选择：
如果您使用的主题在仪表盘的外观下没有编辑器，请查看我们完全可定制的站点编辑器主题。
在桌面设备上，菜单通常显示为一排文字链接。在较小的屏幕（平板电脑和移动设备）上，可能没有足够的空间以方便移动设备访客轻松点按的方式显示所有文字链接。
通常会将菜单项折叠到一个按钮中，这种菜单一般称为“叠加菜单”或“汉堡菜单”（因三条水平线看起来像一个汉堡而得名）。
叠加菜单（通常称为汉堡菜单）可以简化手机等小屏幕设备上的导航体验。
在站点编辑器的导航区块设置中，您可以调整叠加菜单的显示方式。请按照以下步骤定制叠加菜单的显示效果：
- 在您站点的仪表盘中，前往外观 → 编辑器。
- 点击模板，然后选择一个包含菜单的模板，例如“首页”或“前页”。
- 打开屏幕左上角的列表视图（图标看起来像上下排列的三条水平线）。
- 在列表视图中选择导航区块。
- 在屏幕右侧查看导航区块设置。
- 点击设置图标（齿轮图标）。
- 在显示下方，选择叠加菜单设置：
- 移动设备：默认设置。叠加菜单仅在移动设备尺寸的屏幕上显示。
- 关闭：完全不显示叠加菜单。
- 始终：无论屏幕大小，始终显示叠加菜单。
- 通过叠加模板，您可以定制移动设备上显示的全屏叠加层设计。请参阅我们的定制导航叠加菜单指南。
- 点击“保存”按钮，保存您的更改。
网站访客已经习惯在移动设备上看到菜单图标或汉堡菜单。如果显示桌面菜单（即关闭叠加菜单），可能会导致访客在移动设备上难以浏览您的站点。
请访问导航区块指南，了解该区块的所有功能。
经典主题和第三方主题可能有各自默认的移动设备菜单显示方式。请查阅您所选主题的文档，了解更多信息。
您可以设置下拉菜单是在访客把鼠标悬停在菜单项上时打开、在点击菜单项时打开，还是始终显示。
要设置子菜单可见性，请按照以下步骤操作：
- 在您站点的仪表盘中，前往外观 → 编辑器。
- 点击模板，然后选择一个包含菜单的模板，例如“首页”或“前页”。
- 打开屏幕左上角的列表视图。
- 选择您的导航区块。
- 在区块设置边栏中，点击设置图标（齿轮图标）。
- 在显示下方，找到“子菜单可见性”设置，然后选择以下选项之一：
- 悬停：当访客将鼠标悬停在父菜单项上时，下拉菜单会打开。您还可以关闭“在菜单旁边显示箭头”这一设置。
- 点击：当访客点击父菜单项时，下拉菜单会打开。
- 点击保存按钮，保存您的更改。
本指南的这一部分适用于使用 WordPress.com 个人版、高级版、商务版和电子商务版套餐的站点。如果您使用的是免费站点，请升级您的套餐以使用此功能。
CSS 类是一项高级菜单属性，可用于将 CSS 类应用到单个菜单项。
要确定应参考本指南的哪个部分，请访问您的 WordPress.com 仪表盘，查看左侧外观下方的选项。如果您看到编辑器，请参考区块主题部分。否则，请参考经典主题部分的说明。
要在站点编辑器中添加 CSS 类，请按照以下步骤操作：
- 在您站点的仪表盘中，前往外观 → 编辑器。
- 点击模板，然后选择一个包含菜单的模板，例如“首页”或“前页”。
- 打开屏幕左上角的列表视图（图标看起来像上下排列的三条水平线）。
- 在列表视图中选择导航区块。
- 在屏幕右侧查看导航区块设置。
- 点击设置齿轮图标 ⚙️，然后打开“高级”部分。
- 添加您的 CSS 类。
您还可以为导航区块中的单个链接设置 CSS 类。请先选中相应链接，再打开“高级”设置。
请访问我们的导航区块指南，了解该区块的所有功能。
要在经典主题上启用 CSS 类选项，请按照以下步骤操作：
- 在您的 WordPress.com 仪表盘中，前往外观 → 定制器 → 菜单。
- 选择 ⚙️（齿轮）图标，打开高级菜单设置。
- 确保选中“CSS 类”对应的复选框，如右图所示。
- 现在，当您在定制器中展开菜单项时，会看到一个 CSS 类字段。
在右侧的示例中，您可以在 CSS 代码中使用选择器 .twitter 来设置菜单项样式。
高级菜单选项
CSS 类
进一步了解如何添加自定义 CSS。
WordPress.com 支持 