Blocksy 菜单设置笔记

需要的并不是 Blocksy 所说的Sticky Header（粘性菜单），而是一个正常占据页面空间的普通页眉：

• 菜单显示在页面顶部；

• 页面向下滚动后，菜单跟着页面离开；

• 菜单不悬浮在浏览器顶部；

• 菜单不会压在 Banner、标题或正文上面。

你需要重点关闭两个功能：

1. Sticky Header / Sticky Functionality

2. Transparent Header / Transparency Functionality

Blocksy 官方说明中，Sticky Header 会让页眉一直固定在屏幕顶部；Transparent Header 会让页面首屏内容延伸到菜单下面。这两个功能都可能造成你说的“漂浮、遮挡内容”。(Blocksy)

一、关闭 Sticky Header

第一步：进入 Blocksy 页眉设置

登录 WordPress 后台，然后按照下面的路径操作：

WordPress 后台 → 外观 → 自定义

英文后台对应：

Dashboard → Appearance → Customize

进入自定义界面后，点击：

页眉 / Header

Blocksy 官方给出的 Sticky Header 设置路径是：

Customiser → Header → Global Header。(Blocksy)

第二步：打开 Global Header

进入“页眉”以后，你通常会看到页面底部有一个可视化的页眉编辑区域。

这个区域一般分成：

• Top Row：顶部行

• Main Row：主菜单行

• Bottom Row：底部行

在页眉编辑区域中找到：

Global Header

也可能显示为：

• 全局页眉

• Global Header

• Headers → Global Header

点击Global Header，或者点击它旁边的齿轮图标。

第三步：关闭粘性功能

在 Global Header 设置中，寻找以下名称之一：

• Sticky Functionality

• Sticky Header

• Enable Sticky Header

• 粘性功能

• 固定页眉

将这个开关关闭。

如果你看到的不是简单开关，而是以下选项：

• All Rows

• Main Row

• Top & Main Rows

• Main & Bottom Rows

• Only Top Row

• Only Bottom Row

这说明 Sticky Header 已经开启，并且正在指定哪一行悬浮。Blocksy 官方说明 Sticky 功能可以应用于一行或多行。(Blocksy)

你应当选择：

Disabled / Off / None

或者直接关闭上方的：

Sticky Functionality

关闭后，向下滚动页面时，菜单就不会一直跟在浏览器顶部。

二、关闭 Transparent Header

即使关闭 Sticky Header，如果菜单在页面刚打开时仍然压在 Banner 或 Hero 图片上面，说明还开启了Transparent Header。

设置路径

继续停留在：

外观 → 自定义 → 页眉

然后进入：

Headers → Global Header

找到：

• Transparency Functionality

• Transparent Header

• 透明页眉功能

• 透明功能

将它关闭。

Blocksy 官方给出的路径是：

Customiser → Header → Headers → Global Header → Transparency Functionality。(Blocksy)

关闭后会发生什么

关闭透明页眉以后：

• 菜单会有自己独立的区域；

• Banner 或 Hero 图片从菜单下方开始；

• 页面标题不会跑到菜单下面；

• 菜单不再叠加在首屏图片上；

• 不需要通过增加顶部空白来“躲开”菜单。

这一步非常重要。很多时候用户以为是 Sticky Header 遮挡内容，实际上是Transparent Header 让首屏内容进入了页眉区域。

三、我建议你使用的最终设置

你的 Blocksy 页眉建议设置为：

最关键的是前两项：

Sticky Functionality：Off
Transparency Functionality：Off

这样菜单就会成为正常页面结构的一部分，而不是漂浮在内容上方。

四、给菜单设置不透明背景

关闭透明页眉后，再检查菜单背景，避免它仍然看起来像漂浮状态。

在 Blocksy 页眉编辑器底部，点击菜单所在的：

Main Row / 主行

注意，不是点击“Menu 1”菜单元素，而是点击包住整个菜单的Main Row。

然后进入：

Design / 设计

找到：

• Background

• Row Background

• 背景颜色

建议设置为：

• 白色：#FFFFFF

• 或网站原本的浅色背景

不要把透明度设置成 0，也不要使用完全透明背景。

你还可以增加一条非常浅的底部边框：

• Border Bottom：1px

• 颜色：#E8E8E8或类似浅灰色

这样菜单和正文之间会有清楚的分界，但不会显得厚重。

五、调整菜单高度

点击：

Main Row → General / 常规

找到：

• Row Height

• Min Height

• 行高

建议先使用：

• 电脑端：72–80 px

• 手机端：60–68 px

不要把菜单设置得太高，否则即使它不悬浮，也会占用太多首屏空间。

如果 Logo 看起来太大，再单独点击：

Logo → General → Logo Height

适当缩小 Logo，不要通过无限增加 Main Row 高度来容纳 Logo。

六、分别检查电脑、平板和手机

Blocksy 的一些页眉设置可以针对不同设备单独控制。官方文档也说明 Sticky Header 支持设备级别的启用控制。(Blocksy)

在自定义器底部找到三个预览图标：

• 电脑

• 平板

• 手机

依次点击检查。

你需要确认：

电脑端

• 向下滚动后，菜单不再停留在顶部；

• 菜单没有压住 Hero；

• 页面标题从菜单下方正常开始。

平板端

• 菜单不会悬浮；

• 移动菜单按钮位置正常；

• Logo 没有超出菜单高度。

手机端

• 向下滚动后，手机菜单栏跟着页面离开；

• 汉堡菜单没有覆盖正文；

• 页面顶部没有异常的大块空白。

某些设置旁边会有电脑、平板、手机小图标。要确保三个设备中的 Sticky 都已经关闭，而不是只关闭了电脑端。

七、点击“发布”

完成设置以后，点击自定义器顶部的：

发布 / Publish

不要只关闭页面，否则设置可能不会保存。

发布后：

1. 打开网站前台；

2. 不要停留在 WordPress 自定义预览页面；

3. 打开一个新页面或无痕窗口；

4. 向下滚动测试菜单；

5. 检查首页和文章页。

八、如果只有部分页面仍然漂浮

如果首页正常，但某些文章页、产品页或落地页仍然出现漂浮菜单，你的网站可能使用了Conditional Headers（条件页眉）。

Blocksy Pro 可以为不同页面创建不同的页眉。例如：

• 首页一个页眉；

• 文章页一个页眉；

• 产品页一个页眉；

• 落地页一个页眉。

这些页眉拥有各自独立的 Sticky 和 Transparent 设置。Global Header 只是网站默认使用的页眉。(Blocksy)

进入：

外观 → 自定义 → 页眉 → Headers

检查是否除了Global Header之外，还有其他名称，例如：

• Home Header

• Blog Header

• Product Header

• Landing Page Header

• New Header

逐个点击这些页眉，然后分别关闭：

• Sticky Functionality

• Transparency Functionality

否则你可能只修改了 Global Header，而某些页面仍然调用另一个条件页眉。

九、如果发布后没有变化

按下面的顺序处理：

1. 清除 WordPress 缓存插件缓存；

2. 清除服务器缓存；

3. 使用 Cloudflare 时清除 Cloudflare 缓存；

4. 按Ctrl + F5强制刷新；

5. 使用浏览器无痕窗口重新打开网站。

常见缓存插件包括：

• LiteSpeed Cache

• WP Rocket

• W3 Total Cache

• WP Super Cache

• FlyingPress

不要因为前台暂时没变化，就立刻添加 CSS。Blocksy 本身已经提供这些控制项，优先通过主题设置解决。

十、根据现象快速判断关闭哪一个

情况一：刚打开页面，菜单就压在 Banner 上

原因通常是：

Transparent Header

解决：

关闭 Transparency Functionality

情况二：刚打开正常，向下滚动后菜单一直停在顶部

原因通常是：

Sticky Header

解决：

关闭 Sticky Functionality

情况三：刚打开时压住 Banner，滚动后又一直悬浮

说明两个功能都开启了：

• Transparent Header

• Sticky Header

解决：

两个全部关闭

情况四：首页正常，文章页仍然悬浮

原因通常是：

• 使用了 Conditional Header；

• 或文章页单独启用了透明页眉。

解决：

检查 Headers 列表中的其他页眉，并逐个关闭 Sticky 和 Transparency。

最终操作路径总结

你可以直接按照这个路径设置：

WordPress 后台 → 外观 → 自定义 → 页眉 → Headers → Global Header → 关闭 Sticky Functionality → 关闭 Transparency Functionality → 点击发布

然后再进入：

Main Row → Design → 设置不透明背景颜色

这是最自然、最稳定的设置方式，不需要添加 CSS，也不会破坏页面原来的内容排版。