WordPress移动端与平板端全屏菜单CSS调试问题求助

一、解决关闭按钮被遮挡、无法正常点击的问题 #

之前反复调整z-index都没效果，根本不是数值设得不够大：你只给“MENU”文字的伪元素设了最高层级，但整个装着汉堡/X按钮的父容器，已经被展开的全屏菜单压在下面了。这种情况下不管给伪元素设多大的z-index，都跳不出父容器的层叠范围，自然会被遮罩挡住。
需要新增/替换以下CSS规则，把固定层叠顺序调整为从下到上：页面内容 → 全屏菜单 → 关闭按钮：

/* 全屏菜单层级：比页面内容高，比关闭按钮低 */
.et_mobile_menu {
    z-index: 99998 !important;
    /* 删掉原代码里没用的负边距，避免菜单右侧漏出视口 */
    margin-left: 0 !important;
}

/* 关闭按钮容器层级：永远比全屏菜单高一级，不会被遮挡 */
.et_mobile_nav_menu,
#et_mobile_nav_menu,
.mobile_nav.opened .mobile_menu_bar {
    position: relative;
    z-index: 99999 !important;
}

调整后X按钮会永远停在最顶层，不会被菜单面板盖住，点击热区也不会被穿透。

二、解决菜单展开时页面可随意滚动的问题 #

需要搭配少量CSS和极轻量的原生JS，实现全端（手机、平板）的滚动锁定：菜单打开时用户只能浏览菜单内容，没法滑动看下方的页面；关闭菜单后自动回到打开前的滚动位置，不会突然跳回页面顶部。

第一步：添加滚动锁定基础CSS #

/* 菜单展开时触发的页面锁定样式 */
body.mobile-menu-locked {
    overflow: hidden !important;
    touch-action: none !important; /* 兼容iOS、安卓端的触摸滑动拦截 */
    position: fixed !important;
    width: 100% !important;
    /* 锁定时保留当前滚动位置，避免页面瞬间跳顶 */
    top: calc(var(--menu-scroll-pos, 0px) * -1);
}

第二步：添加极简状态监听JS #

把这段JS加到主题的自定义页脚代码区域即可，不需要依赖jQuery：

// 监听移动菜单的状态变化，自动切换滚动锁定
const menuObserver = new MutationObserver(() => {
    const mobileNavRoot = document.querySelector('.mobile_nav');
    if (!mobileNavRoot) return;
    const isMenuOpened = mobileNavRoot.classList.contains('opened');

    if (isMenuOpened) {
        // 记录打开菜单时的页面滚动位置
        const currentScrollY = window.scrollY;
        document.documentElement.style.setProperty('--menu-scroll-pos', currentScrollY + 'px');
        // 给body加锁定类，禁止滚动
        document.body.classList.add('mobile-menu-locked');
    } else {
        // 解除锁定
        document.body.classList.remove('mobile-menu-locked');
        // 恢复到打开菜单前的滚动位置
        const savedScrollPos = parseInt(document.documentElement.style.getPropertyValue('--menu-scroll-pos')) || 0;
        window.scrollTo(0, savedScrollPos);
    }
});

// 绑定菜单节点的监听
const navNode = document.querySelector('.mobile_nav');
if (navNode) {
    menuObserver.observe(navNode, {
        attributes: true,
        attributeFilter: ['class']
    });
}

现有代码的小优化提醒 #

• 原代码中给Divi3场景下的“MENU”文字设置的bottom:30px定位有误，会把文字飘在按钮下方30px的位置，建议改成和汉堡按钮垂直居中对齐，保持视觉统一
• 原代码里min-width:100vw的设置可以保留，配合修正后的0边距，刚好实现完全占满视口宽度的全屏效果

内容的提问来源于stack exchange，提问作者jelmervalk