Blocksy 菜单设置笔记
需要的并不是 Blocksy 所说的Sticky Header(粘性菜单),而是一个正常占据页面空间的普通页眉:
菜单显示在页面顶部;
页面向下滚动后,菜单跟着页面离开;
菜单不悬浮在浏览器顶部;
菜单不会压在 Banner、标题或正文上面。
你需要重点关闭两个功能:
Sticky Header / Sticky Functionality
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
不要只关闭页面,否则设置可能不会保存。
发布后:
打开网站前台;
不要停留在 WordPress 自定义预览页面;
打开一个新页面或无痕窗口;
向下滚动测试菜单;
检查首页和文章页。
八、如果只有部分页面仍然漂浮
如果首页正常,但某些文章页、产品页或落地页仍然出现漂浮菜单,你的网站可能使用了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,而某些页面仍然调用另一个条件页眉。
九、如果发布后没有变化
按下面的顺序处理:
清除 WordPress 缓存插件缓存;
清除服务器缓存;
使用 Cloudflare 时清除 Cloudflare 缓存;
按
Ctrl + F5强制刷新;使用浏览器无痕窗口重新打开网站。
常见缓存插件包括:
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,也不会破坏页面原来的内容排版。