WordPress主题小屏仅显示新增header菜单的问题求助

我完全懂你的痛点——想给WordPress加个小屏专属的额外菜单，结果因为俩菜单都用了<header>标签，媒体查询一写就把原有菜单也给藏了，太闹心了对吧？核心问题就是选择器太宽泛，没把两个<header>区分开，下面给你一套精准的解决思路和修改后的完整代码：

核心解决方案：给额外菜单加专属标识 #

给你的额外菜单<header>添加一个独一无二的类名/ID，这样就能精准控制它的显示隐藏，完全不影响原有菜单。这里我用类名extra-mobile-header做示例，你也可以换成自己喜欢的名字。

步骤1：修改额外菜单的HTML结构 #

把你插入的原生HTML里的<header>改成这样，加上专属类：

<header id="headerdiv" class="scroll-nav-down extra-mobile-header">
  This is your mobile-only extra menu.
</header>

步骤2：调整CSS媒体查询，只针对额外菜单 #

把原来针对所有<header>的媒体查询，改成只针对这个专属类：

/* 大屏（≥1000px）时强制隐藏额外菜单 */
@media (min-width: 1000px) {
  .extra-mobile-header {
    display: none !important; /* 加!important确保优先级足够，覆盖其他样式 */
  }
}

/* 小屏（<1000px）时默认显示额外菜单 */
@media (max-width: 999px) {
  .extra-mobile-header {
    display: block;
  }
}

步骤3：修正JavaScript代码，确保操作精准元素 #

原来的JS里如果用了header选择器，现在要改成针对这个专属类/ID，同时修复你之前toggle函数的语法错误：

// 初始化滚动导航时，指定额外菜单的选择器
$(document).ready(function() {
  scroll = new ScrollNav('#headerdiv', 5);
});

// 可选：窗口大小变化时自动更新菜单状态
$(window).resize(function() {
  const screenWidth = $(window).width();
  const extraMenu = $('.extra-mobile-header');
  if (screenWidth >= 1000) {
    extraMenu.hide();
  } else {
    // 小屏时根据滚动状态决定显示/隐藏
    extraMenu.hasClass('scroll-nav-up') ? extraMenu.hide() : extraMenu.show();
  }
});

完整修改后的可运行示例 #

下面是整合所有修改后的完整代码，你可以直接测试：

<!DOCTYPE html>
<html>
<head>
<style>
body { padding-top: 80px; }

/* 原有WordPress菜单样式（示例） */
.site-header {
  height: 40px;
  position: fixed;
  top: 0;
  width: 100%;
  background: #eee;
  line-height: 40px;
  text-align: center;
}

/* 额外移动端菜单样式 */
#headerdiv {
  height: 40px;
  position: fixed;
  top: 40px; /* 放在原有菜单下方 */
  transition: top 0.2s ease-in-out;
  width: 100%;
  background: #333;
  color: white;
  line-height: 40px;
  text-align: center;
}

.scroll-nav-up { top: -40px; }

/* 大屏隐藏额外菜单 */
@media (min-width: 1000px) {
  .extra-mobile-header {
    display: none !important;
  }
}

/* 小屏默认显示额外菜单 */
@media (max-width: 999px) {
  .extra-mobile-header {
    display: block;
  }
}

main {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2O8dOnSfwYg0NPTYwTRuAAj0QqxmYBNM1briFaIzRbi3UiRZ75uNgUHGbfvabgfsHqGaIXYPAMAD8wgC/DOrZ4AAAAASUVORK5CYII= ) repeat;
  height: 2000px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var ScrollNav = function(elem, delta) {
  this.m_Delta = delta;
  this.m_LastScrollTop = 0;
  this.m_Element = elem;
  $(window).on("scroll", null, {ScrollNav: this}, this.OnWindowScroll);
};

ScrollNav.prototype.OnWindowScroll = function(e) {
  var scrolledTop = $(window).scrollTop();
  var Nav = e.data.ScrollNav;
  if(Math.abs(Nav.m_LastScrollTop - scrolledTop) <= Nav.m_Delta) {
    return;
  }
  if(scrolledTop > Nav.m_LastScrollTop && scrolledTop > $(Nav.m_Element).outerHeight()) {
    $(Nav.m_Element).removeClass('scroll-nav-down').addClass('scroll-nav-up');
  } else if(scrolledTop + $(window).height() < $(document).height()) {
    $(Nav.m_Element).removeClass('scroll-nav-up').addClass('scroll-nav-down');
  }
  Nav.m_LastScrollTop = scrolledTop;
}

var scroll = null;
$(document).ready(function() {
  scroll = new ScrollNav('#headerdiv', 5);
});

// 窗口大小变化时同步菜单状态
$(window).resize(function() {
  const screenWidth = $(window).width();
  const extraMenu = $('.extra-mobile-header');
  if (screenWidth >= 1000) {
    extraMenu.hide();
  } else {
    extraMenu.hasClass('scroll-nav-up') ? extraMenu.hide() : extraMenu.show();
  }
});
</script>
<body>
<!-- 原有WordPress Header菜单 -->
<header class="site-header">
  This is your original site header menu.
</header>

<!-- 额外移动端专属菜单 -->
<header id="headerdiv" class="scroll-nav-down extra-mobile-header">
  This is your mobile-only extra menu.
</header>

<main>
  This is your body.
</main>
</body>
</html>

关键细节说明 #

1. 选择器隔离：通过专属类extra-mobile-header，彻底把额外菜单和原有<header>区分开，媒体查询和JS只会操作目标元素。
2. 窗口resize监听：确保用户调整窗口大小时，菜单状态会自动更新，避免出现大屏还显示额外菜单的情况。
3. 优先级保障：用!important确保媒体查询的隐藏规则不会被其他样式覆盖。

内容的提问来源于stack exchange，提问作者mr-woodapple