Astra主题教程：如何在免费的情况下创建粘性页眉？

在使用 Astra 主题搭建 WordPress 网站时，很多人会希望网站顶部的导航栏能够在滚动页面时保持固定，也就是实现所谓的 “粘性页眉”（Sticky Header）。但这一功能默认只在 Astra Pro 版本中提供。

如果你不打算为 Astra 升级付费，那么本文将教你一个免费实现该效果的方法 —— 通过简单的 CSS 代码即可轻松实现 Sticky Header，无需插件与 Astra Pro！

什么是粘性页眉？

粘性页眉（Sticky Header） 是指：当用户向下滚动网页时，网站顶部的导航栏仍然保持固定，始终显示在浏览器顶部，方便用户随时点击导航菜单。

实现思路：用自定义 CSS 实现粘性页眉效果

步骤一：登录你的 WordPress 后台

前往WordPress 网站后台，点击左侧菜单栏中的 外观 > 自定义。

步骤二：打开「额外 CSS」面板

在「自定义」界面中，点击左侧菜单中的 额外 CSS（Additional CSS）。

步骤三：粘贴以下 CSS 代码

将以下代码复制并粘贴到 CSS 编辑区域中：

.ast-header-break-point .main-header-bar {
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: #ffffff;
    width: 100%;
    transition: all 0.3s ease-in-out;
}

✅ 粘贴后，立刻看到顶部导航栏已经变成可滚动固定了！

可选参数修改说明

可以根据需要对以下参数进行微调：

• top: 0; —— 控制距离页面顶部的距离（可以改为 top: 50px;）
• z-index: 999; —— 确保它覆盖其他内容（不要改得太小）
• background-color —— 修改粘性状态下的背景颜色（如 #000000）
• transition —— 设置粘性时的动画效果

如果想增加内边距 padding，可复制下面代码：

.main-header-bar {
    padding-top: 20px;
    padding-bottom: 20px;
}

移动端自适应优化（可选）

这段代码让粘性导航在手机端也能保持良好的展示效果。

@media (max-width: 768px) {
  .main-header-bar {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

不懂 CSS？可以让 ChatGPT 来帮你！

如果你对 CSS 不熟悉，还可以复制上述代码片段，让 ChatGPT 或 AI 工具根据你的需求（比如改变颜色、间距、阴影）帮你快速修改，非常适合小白用户。

总结

即使没有升级到 Astra Pro，也可以轻松通过自定义 CSS 代码实现 WordPress 网站的粘性页眉效果。本文的教程只需添加几行代码，不用插件也能让网站实现粘性导航的功能，提升网站体验和实用性。如果想了解更多WordPress相关的教程和资讯，请关注光子波动网，拥有最全的WordPress教程和最活跃的WordPress交流社区。

联系我们
教程看不懂？联系我们为您免费解答！免费助力个人，小企站点！	客服微信
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：info@361sale.com
④ 工作时间：周一至周五，9:30-18:30，节假日休息