WordPress Consultexo主题：头部变为粘性时菜单按钮消失

DevOps 小满

2026-8-7

WordPress Consultexo主题滚动后菜单图标消失问题解决方法

使用Consultexo主题时，页面滚动后头部变为粘性状态，右上角的菜单图标会消失。尝试过修改颜色、自定义CSS、更换插件都无法解决该问题。

滚动前的菜单图标：

滚动后的状态（菜单图标消失）：
滚动后的菜单图标

解决方法：

定位粘性头部的CSS问题：主题滚动后会给头部添加专属类名（如.sticky-header），菜单图标可能在该类下被设置为display: none、opacity: 0，或是颜色与背景色重合导致看不见。按F12打开浏览器开发者工具，查看粘性状态下菜单图标的CSS属性，确认具体原因。
强制显示菜单图标：找到对应选择器后，在主题的「自定义CSS」中添加以下代码（替换成实际的选择器）：

/* 替换.sticky-header和.menu-toggle-icon为实际页面中的选择器 */
.sticky-header .menu-toggle-icon {
    display: block !important;
    opacity: 1 !important;
    color: #000 !important; /* 根据粘性头部背景色调整图标颜色 */
}

提示：右键点击菜单图标选择「检查」，即可获取图标的具体CSS选择器，颜色值根据头部背景色调整，保证图标与背景有明显对比度。

修复JS逻辑问题：如果是主题JS在滚动时错误隐藏了图标，可尝试添加自定义JS强制显示：

window.addEventListener('scroll', function() {
    const stickyHeader = document.querySelector('.sticky-header');
    const menuIcon = document.querySelector('.menu-toggle-icon');
    if (stickyHeader && menuIcon) {
        menuIcon.style.display = 'block';
        menuIcon.style.opacity = '1';
    }
});

将这段代码添加到主题的「自定义JS」区域，或用代码插入插件添加到页面。