如何让导航栏切换按钮（navbar toggle）实现响应式布局？

问题核心分析 #

你的导航栏布局中，.left-elements 和 .right-elements 设置了 width:50%，加上 Logo 宽度会导致总宽度超出容器；同时切换按钮独立于右侧元素容器外，无法继承原有间距和对齐规则，导致断点后位置错乱。

具体修改步骤 #

1. 调整 HTML 结构

将切换按钮移入 .right-elements 容器内，这样它可以直接继承右侧元素的间距和对齐样式：

<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<nav class="navbar">
  <div class="logo-container">
    <a href=""><img class="logo" src="./images/Donation_Hub-3-2-removebg-preview.png" alt="Donation Hub Logo"></a>
  </div>
  <div class="left-elements">
    <a href="">About</a>
    <a href="">Pricing</a>
    <a href="">Integrations</a>
    <a href="">Support</a>
  </div>
  <div class="right-elements">
    <a href="" class="nav-action">Log In</a>
    <a href="" class="nav-action"><button class="sign-up">Sign Up</button></a>
    <!-- 将切换按钮移入此处 -->
    <div class="navbar-toggle">
      <a href="">
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
                  <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
        </svg>
      </a>
    </div>
  </div>
</nav>

2. 修改 CSS 样式

• 移除左右元素容器的 width:50%，避免布局溢出；给左侧容器添加 flex:1 让它占据 Logo 后的剩余空间
• 给右侧的登录/注册按钮添加统一类名，方便断点时隐藏
• 调整媒体查询逻辑，只隐藏登录/注册按钮，保留右侧容器以显示切换按钮

html,
body {
  margin: 0;
  background-color: white;
  padding: 0;
}

.navbar {
  display: flex;
  position: fixed;
  align-items: center;
  height: 5rem;
  width: 100%;
  background-color: white;
}

.logo-container {
  padding-inline-start: 0.5em;
}

.logo {
  height: 3rem;
  width: 15rem;
}

.left-elements {
  display: flex;
  gap: 1.5rem;
  padding-inline-start: 1.5em;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  font-size: 0.9em;
  height: 50%;
  /* 移除width:50%，添加flex:1占据剩余空间 */
  flex: 1;
}

.right-elements {
  display: flex;
  gap: 1em;
  white-space: nowrap;
  padding-inline-end: 4em;
  justify-content: flex-end;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  font-size: 0.9em;
  height: 50%;
  /* 移除width:50% */
}

a {
  text-decoration: none;
  color: black;
}

.navbar-toggle {
  display: none;
}

@media screen and (max-width: 820px) {
  body {
    background-color: rebeccapurple;
  }
  .left-elements {
    display: none;
  }
  /* 只隐藏登录/注册按钮，保留右侧容器 */
  .right-elements .nav-action {
    display: none;
  }
  .navbar-toggle {
    display: flex;
  }
}

修改效果 #

• 缩小屏幕时，登录/注册按钮会先保持原有间距向内收缩，达到断点后隐藏
• 切换按钮会继承右侧容器的 padding-inline-end:4em，保持与 Logo 的原有间距，位置和原右侧元素对齐

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