Astra Theme移动端菜单点击后推送内容下移，如何改为菜单覆盖内容？

方法一：使用主题内置设置调整 #

• 登录WordPress后台，进入「外观」→「自定义」
• 找到「Header Builder」（头部构建器），点击界面中的移动端视图切换按钮（小屏幕图标）
• 找到「Mobile Menu」选项并展开，查看「菜单行为」相关设置
• 选择「Overlay（覆盖）」模式（部分版本可能叫「Menu Position」），保存设置即可完成切换。

方法二：自定义CSS代码实现覆盖效果 #

如果主题内置没有对应选项，可添加以下CSS代码到「外观」→「自定义」→「额外CSS」中：

/* 移动端菜单设置为覆盖模式 */
@media (max-width: 921px) {
    .ast-mobile-menu-active #page {
        position: relative;
        z-index: 0;
    }
    .ast-builder-menu-mobile.ast-menu-toggle-handle {
        z-index: 9999;
    }
    .ast-mobile-menu-wrap {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 9998;
        background-color: #ffffff; /* 可根据需求修改菜单背景色 */
    }
    /* 取消页面内容的推送位移 */
    .ast-mobile-menu-active .ast-container {
        transform: none !important;
    }
}

• 代码作用：通过固定定位让菜单占据整个视口，利用层级(z-index)确保菜单覆盖在页面内容上方，同时移除默认的页面位移效果，避免内容被推送下移。

注意事项 #

• 不同版本的Astra主题选项名称可能略有区别，找不到内置选项时优先使用CSS方法
• 添加CSS前建议备份当前主题设置，或通过子主题添加代码，防止主题更新后代码丢失

内容的提问来源于stack exchange，提问作者CP Creative Studio