自定义 CSS

操作指南 所有套餐 1 分钟阅读

当设置、字体和颜色无法满足需求时（例如特殊的悬停效果、某个菜单项的字号或模板的小修复），请使用 样式表 / CSS。CSS 会随菜单一起保存，并在发布时添加到您的店面。

注意

自定义 CSS 需要基本的 CSS 知识。如果您不想编写代码，请联系我们，我们会免费帮助您完成小的样式修改。

添加自定义 CSS

1. 打开“高级”选项卡

   在菜单编辑器中，点击左侧边栏中的 高级 图标（</>）(1)。

   

   打开高级选项卡 (1)，然后在样式表 / CSS (2) 中输入 CSS。

2. 添加 CSS

   在 样式表 / CSS (2) 中输入或粘贴 CSS，替换占位文字 //enter css custom here。

3. 保存并发布

   点击 保存，然后点击 发布。强制刷新店面即可查看效果。

定位正确的元素

CSS 会按原样添加到页面，且不仅限于此菜单，因此请限定选择器的范围：

• 所有菜单：以 .gm-menu 开头。
• 单个菜单：以 .gm-menu-<ID> 开头。如需查找 ID，请在店面上右键点击菜单并选择 Inspect（检查）。
• 单个菜单项：在菜单项设置的 高级 部分为其设置 额外的类名（参阅编辑菜单项），然后使用该类名。

例如，将额外类名为 sale-item 的菜单项设为红色粗体：

.gm-menu .sale-item > .gm-target {
  color: #d72c0d !important;
  font-weight: 700 !important;
}

高级 选项卡中还有 市场可用性，可将菜单限制在所选市场，参阅按市场显示菜单。

故障排除

我的 CSS 没有效果

• 检查保存后是否点击了 发布。
• 应用自身的样式经常使用 !important，因此您的规则可能也需要加上。
• 检查是否有拼写错误，例如缺少 }；一个错误就可能导致其后的规则全部失效。

相关页面

• 调整菜单颜色设置菜单栏、子菜单、选项卡、产品标签和加入购物车按钮的颜色。
• 调整菜单字体为菜单的每个部分选择字体、字重和字号。
• 编辑菜单项更改菜单项的标题、链接、图标、颜色、徽章、子菜单和可见性，或复制、移动和删除菜单项。

此页面对您有帮助吗？

报告问题