WoodMart主题设置粘性页眉与透明菜单教程

用WoodMart主题搭建网站的时候，很多人希望让菜单在滚动时保持在顶部，并在页面顶部展示透明的视觉效果。这种设计看起来会更高级，还能提升整体视觉层次感。本文将带你一步步完成粘性页眉与透明菜单的设置，不需要写代码，新手也能轻松搞定。

一、什么是粘性页眉和透明菜单？

• 粘性页眉（Sticky Header）：当用户向下滚动页面时，顶部的导航条会始终固定在屏幕顶部，方便快速导航。
• 透明菜单：菜单栏本身没有背景颜色，背景直接显示的是页面顶图或其他内容，通常用于首页大图场景，视觉效果更为现代。

二、准备工作

确保你用的是最新版 WoodMart 主题，并启用了内置的 Header Builder（页眉构建器）。这个功能支持自定义页眉布局，包括粘性和透明效果。

进入后台路径：

WordPress后台 > WoodMart > Header Builder

三、启用粘性页眉

• 打开 Header Builder 编辑器。
• 在结构视图中，选择你当前正在使用的页眉布局。
• 找到顶部区域（Top / Main）对应的设置区域，点击打开设置面板。

• 在“Sticky”选项中选择“Stick on scroll”或“Slide after scrolled down”（根据需要选择是否始终粘性，或仅向下滚动时后出现）。
• 点击保存并刷新页面进行预览。

四、设置透明菜单效果

透明菜单通常适用于首页顶部带有大图的场景，如果菜单栏不透明，会遮挡背景图，影响美观。设置方法如下：

• 在 Header Builder 中，选择当前的主导航区域。

• 打开背景设置，选择“透明”或将背景颜色透明度调到 0。

• 然后，在页面编辑器中（例如使用 Elementor 或 WPBakery），确保你在首页首屏添加的是全宽背景图，并设置为内容层下方。

• 如果需要首页专属透明菜单，可以在 Header Builder 中使用“条件显示”，仅对首页启用透明菜单，其它页面保持默认样式。
• 设计好后，点击 Publish（发布）。弹出 Display Conditions 设置：

五、优化导航文字与LOGO颜色

因为背景是透明的，导航菜单文字与LOGO如果是深色，可能在浅色背景上看不清楚。解决方法如下：

• 在首页添加一个额外的CSS类，比如 .transparent-header；
• 在该类下定义导航文字和LOGO的颜色（比如白色）；
• 可配合“Sticky”状态切换LOGO图片，让滚动前后风格统一。

示例CSS：

.transparent-header .site-logo img {
  content: url('路径/logo-white.png');
}

.transparent-header .main-nav > li > a {
  color: #fff;
}

六、常见问题排查

• 导航粘性无效？ 检查是否在移动端禁用了粘性功能，或与某些插件冲突。
• 透明效果不生效？ 确认导航栏所在区域背景是否设为透明，或有其他层级样式覆盖。

七、小结

WoodMart 提供了强大的自定义页眉功能，无需第三方插件也能轻松实现粘性与透明导航的视觉效果。合理布局，再配合首页大图和滚动切换的细节设计，可以营造出专业、高级的网站体验。

联系我们
教程看不懂？联系我们为您免费解答！免费助力个人，小企站点！	客服微信
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：info@361sale.com
④ 工作时间：周一至周五，9:30-18:30，节假日休息