需要的并不是 Blocksy 所说的Sticky Header粘性菜单而是一个正常占据页面空间的普通页眉菜单显示在页面顶部页面向下滚动后菜单跟着页面离开菜单不悬浮在浏览器顶部菜单不会压在 Banner、标题或正文上面。你需要重点关闭两个功能Sticky Header / Sticky FunctionalityTransparent Header / Transparency FunctionalityBlocksy 官方说明中Sticky Header 会让页眉一直固定在屏幕顶部Transparent Header 会让页面首屏内容延伸到菜单下面。这两个功能都可能造成你说的“漂浮、遮挡内容”。(Blocksy)一、关闭 Sticky Header第一步进入 Blocksy 页眉设置登录 WordPress 后台然后按照下面的路径操作WordPress 后台 → 外观 → 自定义英文后台对应Dashboard → Appearance → Customize进入自定义界面后点击页眉 / HeaderBlocksy 官方给出的 Sticky Header 设置路径是Customiser → Header → Global Header。(Blocksy)第二步打开 Global Header进入“页眉”以后你通常会看到页面底部有一个可视化的页眉编辑区域。这个区域一般分成Top Row顶部行Main Row主菜单行Bottom Row底部行在页眉编辑区域中找到Global Header也可能显示为全局页眉Global HeaderHeaders → Global Header点击Global Header或者点击它旁边的齿轮图标。第三步关闭粘性功能在 Global Header 设置中寻找以下名称之一Sticky FunctionalitySticky HeaderEnable Sticky Header粘性功能固定页眉将这个开关关闭。如果你看到的不是简单开关而是以下选项All RowsMain RowTop Main RowsMain Bottom RowsOnly Top RowOnly Bottom Row这说明 Sticky Header 已经开启并且正在指定哪一行悬浮。Blocksy 官方说明 Sticky 功能可以应用于一行或多行。(Blocksy)你应当选择Disabled / Off / None或者直接关闭上方的Sticky Functionality关闭后向下滚动页面时菜单就不会一直跟在浏览器顶部。二、关闭 Transparent Header即使关闭 Sticky Header如果菜单在页面刚打开时仍然压在 Banner 或 Hero 图片上面说明还开启了Transparent Header。设置路径继续停留在外观 → 自定义 → 页眉然后进入Headers → Global Header找到Transparency FunctionalityTransparent Header透明页眉功能透明功能将它关闭。Blocksy 官方给出的路径是Customiser → Header → Headers → Global Header → Transparency Functionality。(Blocksy)关闭后会发生什么关闭透明页眉以后菜单会有自己独立的区域Banner 或 Hero 图片从菜单下方开始页面标题不会跑到菜单下面菜单不再叠加在首屏图片上不需要通过增加顶部空白来“躲开”菜单。这一步非常重要。很多时候用户以为是 Sticky Header 遮挡内容实际上是Transparent Header 让首屏内容进入了页眉区域。三、我建议你使用的最终设置你的 Blocksy 页眉建议设置为设置建议Sticky Functionality关闭Transparency Functionality关闭Header Background不透明纯色Main Row保留Top Row有联系方式时才保留Bottom Row一般关闭Sticky Animation不需要设置Sticky Devices全部关闭最关键的是前两项Sticky FunctionalityOffTransparency FunctionalityOff这样菜单就会成为正常页面结构的一部分而不是漂浮在内容上方。四、给菜单设置不透明背景关闭透明页眉后再检查菜单背景避免它仍然看起来像漂浮状态。在 Blocksy 页眉编辑器底部点击菜单所在的Main Row / 主行注意不是点击“Menu 1”菜单元素而是点击包住整个菜单的Main Row。然后进入Design / 设计找到BackgroundRow Background背景颜色建议设置为白色#FFFFFF或网站原本的浅色背景不要把透明度设置成 0也不要使用完全透明背景。你还可以增加一条非常浅的底部边框Border Bottom1px颜色#E8E8E8或类似浅灰色这样菜单和正文之间会有清楚的分界但不会显得厚重。五、调整菜单高度点击Main Row → General / 常规找到Row HeightMin Height行高建议先使用电脑端72–80 px手机端60–68 px不要把菜单设置得太高否则即使它不悬浮也会占用太多首屏空间。如果 Logo 看起来太大再单独点击Logo → General → Logo Height适当缩小 Logo不要通过无限增加 Main Row 高度来容纳 Logo。六、分别检查电脑、平板和手机Blocksy 的一些页眉设置可以针对不同设备单独控制。官方文档也说明 Sticky Header 支持设备级别的启用控制。(Blocksy)在自定义器底部找到三个预览图标电脑平板手机依次点击检查。你需要确认电脑端向下滚动后菜单不再停留在顶部菜单没有压住 Hero页面标题从菜单下方正常开始。平板端菜单不会悬浮移动菜单按钮位置正常Logo 没有超出菜单高度。手机端向下滚动后手机菜单栏跟着页面离开汉堡菜单没有覆盖正文页面顶部没有异常的大块空白。某些设置旁边会有电脑、平板、手机小图标。要确保三个设备中的 Sticky 都已经关闭而不是只关闭了电脑端。七、点击“发布”完成设置以后点击自定义器顶部的发布 / Publish不要只关闭页面否则设置可能不会保存。发布后打开网站前台不要停留在 WordPress 自定义预览页面打开一个新页面或无痕窗口向下滚动测试菜单检查首页和文章页。八、如果只有部分页面仍然漂浮如果首页正常但某些文章页、产品页或落地页仍然出现漂浮菜单你的网站可能使用了Conditional Headers条件页眉。Blocksy Pro 可以为不同页面创建不同的页眉。例如首页一个页眉文章页一个页眉产品页一个页眉落地页一个页眉。这些页眉拥有各自独立的 Sticky 和 Transparent 设置。Global Header 只是网站默认使用的页眉。(Blocksy)进入外观 → 自定义 → 页眉 → Headers检查是否除了Global Header之外还有其他名称例如Home HeaderBlog HeaderProduct HeaderLanding Page HeaderNew Header逐个点击这些页眉然后分别关闭Sticky FunctionalityTransparency Functionality否则你可能只修改了 Global Header而某些页面仍然调用另一个条件页眉。九、如果发布后没有变化按下面的顺序处理清除 WordPress 缓存插件缓存清除服务器缓存使用 Cloudflare 时清除 Cloudflare 缓存按Ctrl F5强制刷新使用浏览器无痕窗口重新打开网站。常见缓存插件包括LiteSpeed CacheWP RocketW3 Total CacheWP Super CacheFlyingPress不要因为前台暂时没变化就立刻添加 CSS。Blocksy 本身已经提供这些控制项优先通过主题设置解决。十、根据现象快速判断关闭哪一个情况一刚打开页面菜单就压在 Banner 上原因通常是Transparent Header解决关闭 Transparency Functionality情况二刚打开正常向下滚动后菜单一直停在顶部原因通常是Sticky Header解决关闭 Sticky Functionality情况三刚打开时压住 Banner滚动后又一直悬浮说明两个功能都开启了Transparent HeaderSticky Header解决两个全部关闭情况四首页正常文章页仍然悬浮原因通常是使用了 Conditional Header或文章页单独启用了透明页眉。解决检查 Headers 列表中的其他页眉并逐个关闭 Sticky 和 Transparency。最终操作路径总结你可以直接按照这个路径设置WordPress 后台 → 外观 → 自定义 → 页眉 → Headers → Global Header → 关闭 Sticky Functionality → 关闭 Transparency Functionality → 点击发布然后再进入Main Row → Design → 设置不透明背景颜色这是最自然、最稳定的设置方式不需要添加 CSS也不会破坏页面原来的内容排版。
