Blocksy 菜单设置笔记

📅 2026/7/29 18:43:10 👁️ 阅读次数 📝 编程学习
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关闭
Transparency Functionality关闭
Header Background不透明纯色
Main Row保留
Top Row有联系方式时才保留
Bottom Row一般关闭
Sticky Animation不需要设置
Sticky Devices全部关闭

最关键的是前两项:

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,也不会破坏页面原来的内容排版。