Astra透明导航用途很广泛,可以设计出导航栏、页眉、网页内容紧密结合、无缝衔接的页面,整体效果很漂亮。本文指导新手如何用 Astra主题创建透明导航栏,而且这个功能还是免费的。
Astra主题低至37折,Pro版本 $47/年,立即登录 参与新年优惠活动!更多Astra主题内容请看 Astra专题
学习、小网站选择 1核2g配置的服务器起步,国外主题建站选择 2核4g配置,适当搭配运行流畅。
国内服务器:阿里云、腾讯云(都有代金券,付款时抵用省钱) 不知道如何选择地域、配置请在页面右侧+老魏的联系方式,我们一起研究。
长期运行外贸网站选择Hostinger虚拟主机,WordPress网站速度、稳定性都很棒,性价比极高!
关于 hostinger:hostinger专题
1、透明导航栏效果如何?
大家比较下图中上面是透明导航栏,下面是导航栏与banner图片分开,两种效果哪个更吸引人、更震撼,一目了然。
透明导航栏不是 Astra独有的,很多主题都可以设计出同样的效果。

2、Astra 透明导航栏如何设置?
启用透明标题会删除页眉的背景颜色,并把导航栏内容移动到下方的页面顶部,实现透明效果。启用透明导航栏后,建议添加 banner图像、视频、滑块等元素,或用顶部没有标题、文字的部分。这样能避免导航栏和内容重叠。
Astra 要设计透明导航栏很简单,有两种方法,包括:全局透明和单独透明。
- 全局透明是在整个网站上启用
- 单独透明是通过文章/页面元数据启用,仅对当前页面有效
- 也可以在整个网站启用但在某些页面禁用;或者在整个网站禁用而在某些页面启用(开头的demo演示站就是这样的)。
首先安装 Astra主题。
登录 WordPress后台>外观>主题,搜索Astra,安装启用。

WordPress后台 > Astra选项,右侧点击“页眉生成器”。

如下图所示,提示导航栏是使用透明导航设置的,点击“透明页眉”进入。

常规选项卡 GENERAL
要启用透明度就激活“在整个网站上启用”选项。
在下面还有是否在 404页面、搜索页、存档页、博客页、最新文章页、页面、文章、WooCommerce产品页中禁用的选项。

启用:选择在桌面、移动或桌面+移动上启用透明标题
透明页眉的不同logo: 如果网站logo在页眉上看起来不错,但对于透明页可能没有那么好看,可以启用此选项并设置用于透明页眉的新logo。
还能设置透明导航的 logo宽度。

设计选项卡
用于设置透明导航样式的众多选项。可以底部边框宽度、背景叠加、站点标题、菜单颜色、文字链接、菜单背景、子菜单和颜色、社交和颜色、搜索和颜色、小工具、HTML等。底部边框默认设置为 0px所以是看不到的。如果增加边框值到 1px 或更大就能够看到了。
这些设置仅适用于透明导航,如果你在某些页面上使用常规页眉,这些设置就不会生效了。
3、Astra 透明导航栏页面元数据设置
以上说的是全局设置 Astra透明导航,那么涉及到某个页面/文章,我不想让透明导航生效,应该怎么做呢?
针对某个单独页面的透明导航在文章/页面元数据启用,且仅对当前页面有效。
如下图所示找到透明页眉,包括:
- 定制器设置(上面的全局设置)
- 已启用
- 停用
本文开头的 demo演示网站就是在定制器中未开启透明导航,而是在每个页面元数据中开启。这样既可以满足页面透明导航需要,又能在不想开启的页面/文章中看不到透明导航。

4、Astra透明导航总结
有两种方式,一个是全局设置,另一个是在页面元数据那里设置。
全局设置可以针对桌面端、移动端、桌面端+移动端分别进行设置。
页面元数据开启会覆盖掉全局设置,本文开头的 demo演示网站就是这样的。假如在网站中添加一个 blog栏目,默认就没有透明页眉,而每个页面也有透明页眉的效果。