Bulma居中+右对齐导航移动端菜单消失问题求助

我帮你排查了代码里的问题，主要是导航结构嵌套错误和移动端样式未适配导致的下拉菜单无法显示，下面是具体的修复方案：

问题根源分析 #

1. 你嵌套了两层navbar-menu元素：外层的#nav-menu和内层的#navbarBasicExample，Bulma的汉堡按钮默认只会切换指定data-target的那个菜单，但这种嵌套结构会干扰菜单的展开逻辑，导致移动端点击汉堡按钮后没有反应。
2. 自定义的.navbar-start--centered类只处理了桌面端的居中布局，没有考虑移动端的垂直排列需求，即使菜单能展开，样式也会混乱。

修复步骤 #

1. 清理HTML结构，移除多余的navbar-menu嵌套 #

保留最外层的#nav-menu作为菜单容器，把navbar-start和navbar-end直接放在里面，去掉内层的#navbarBasicExample。

2. 调整CSS适配移动端 #

• 给.navbar-start--centered添加移动端的flex方向设置，让链接垂直排列
• 调整移动端链接的padding，避免间距过大
• 确保下拉菜单展开时的样式正确

3. 补充汉堡按钮的切换脚本（Bulma默认不自带JS） #

Bulma的汉堡按钮需要手动添加JavaScript来切换is-active类，实现菜单的展开/收起。

修改后的完整代码 #

HTML #

<section class="hero is-large">
  <div class="hero-head">
    <nav class="navbar" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="nav-menu">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
      <div class="navbar-menu" id="nav-menu">
        <div class="navbar-start navbar-start--centered">
          <a href="">Products</a>
          <a href="">Our Story</a>
          <a href="http://127.0.0.1:5500/home.html" class="logo">
            <img src="https://upload.wikimedia.org/wikipedia/commons/b/be/Lineage_OS_Logo.png" width="170" />
          </a>
          <a href="">Blog</a>
          <a href="">Contact Us</a>
        </div>
        <div class="navbar-end">
          <a class="cart">
            <i class="fas fa-cart-plus"></i>
            <span>0</span>
          </a>
          <a class="login">
            <i class="fas fa-user"></i> Log in
          </a>
        </div>
      </div>
    </nav>
  </div>
  <div class="hero-body is-hidden-mobile">
    <div class="container"></div>
  </div>
</section>

CSS #

html, body { height: 100%; }
body { margin: 0; }

/* 桌面端居中布局 */
.navbar-start--centered {
  flex-grow: 1;
  justify-content: center;
}

/* 移动端适配：垂直排列链接 */
@media screen and (max-width: 1023px) {
  .navbar-start--centered {
    flex-direction: column;
    align-items: flex-start;
  }
  .navbar .navbar-start a,
  .navbar .navbar-end a {
    padding: 12px 20px;
    width: 100%;
  }
  .navbar .navbar-start a.logo {
    justify-content: flex-start;
  }
}

.navbar .navbar-start a {
  padding: 30px 50px;
  color: #194522;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.navbar .navbar-start a.logo img {
  fill: #194522;
}

.navbar .navbar-start a.logo:hover img,
.navbar .navbar-start a.logo:hover img:hover {
  fill: #abcf39;
}

.navbar .navbar-end a {
  padding: 30px 20px;
  color: #194522;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.navbar .navbar-start a:hover,
.navbar .navbar-end a:hover {
  color: #abcf39;
}

.navbar .navbar-end a i {
  padding-right: 6px;
}

.hero { background-color: #f3e2f3; }

JavaScript #

document.addEventListener('DOMContentLoaded', () => {
  // 获取汉堡按钮和菜单元素
  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
  
  if ($navbarBurgers.length > 0) {
    $navbarBurgers.forEach(el => {
      el.addEventListener('click', () => {
        const target = el.dataset.target;
        const $target = document.getElementById(target);
        
        // 切换is-active类
        el.classList.toggle('is-active');
        $target.classList.toggle('is-active');
      });
    });
  }
});

关键修复点说明 #

• 移除嵌套的navbar-menu：Bulma的导航结构中，navbar-menu是唯一的菜单容器，嵌套会破坏其原生的展开逻辑。
• 移动端flex方向调整：把.navbar-start--centered的flex方向改为column，让导航链接在移动端垂直排列，符合下拉菜单的预期样式。
• 补充切换脚本：Bulma只提供CSS框架，需要手动添加JS来实现汉堡按钮的交互逻辑，切换is-active类来显示/隐藏菜单。

这样修改后，移动端点击汉堡按钮就能正常展开包含Products、Our Story、Blog和Contact Us的下拉菜单了，同时保持桌面端的居中布局效果。

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