如何用CSS实现500px断点无汉堡图标的响应式导航栏

实现这个效果不用改原有HTML结构，只要调整flex布局规则、加对应断点的媒体查询就行，顺带可以修正原代码里a标签重复写href的小语法问题。

问题原因 #

原来的代码达不到折行效果，是两个默认属性限制的：

• 导航栏容器#nav-bar开了flex布局之后默认不允许换行，子元素会被强制压缩挤在同一行
• .menu设了max-width: 20%，哪怕空间不够也不会撑满整行，自然掉不到公司名下面

具体修改点 #

• 给#nav-bar加flex-wrap: wrap，允许flex子元素在空间不足的时候自动折行
• 写max-width: 500px的媒体查询，断点下做三个调整：
  • 让.company-name宽度占满整行，直接把菜单容器挤到第二行
  • 把.menu的max-width限制去掉，让它也占满整行，保证导航链接能均匀分布
  • 给菜单加一点上下内边距，别和公司名、导航栏边缘贴太近，观感更好
• 把原HTML里导航链接重复写的空href删掉，属于无效语法，虽然不影响布局但不符合规范

完整可运行代码 #

CSS 代码 #

#nav-bar {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; /* 核心：允许flex子元素折行 */
  padding-left: 10px;
  background-color: #38b000;
  color: #FFFFFF;
  align-items: center;
  padding-block: 8px; /* 可选：给导航栏加上下内边距，避免内容贴边 */
}

.company-name {
  font-size: 32px;
  flex: 1;
  margin: 0; /* 可选：清除h2默认外边距，避免布局错位 */
}

.company-link {
  color: inherit; /* 可选：继承导航栏白色文字，覆盖默认链接色 */
  text-decoration: none; /* 可选：去掉链接默认下划线，可按需调整 */
}

.menu {
  display: flex;
  justify-content: space-evenly;
  flex: 1;
  max-width: 20%;
  font-size: 18px;
  align-items: center;
}

.nav-link {
  color: inherit;
  text-decoration: none;
}

/* 500px宽度断点 */
@media (max-width: 500px) {
  .company-name {
    flex: 0 0 100%; /* 占满整行宽度，把菜单挤到下一行 */
    text-align: center; /* 可选：小屏下公司名居中 */
  }
  .menu {
    max-width: 100%;
    flex: 0 0 100%; /* 菜单占满整行 */
    padding-block: 8px; /* 菜单和上下元素留间距 */
  }
}

HTML 代码（仅修正重复href问题，结构无改动） #

<nav id="nav-bar">
  <h2 class="company-name" title="Return to Home Page"><a class="company-link" href="/">URL Saver</a></h2>
  <div class="menu">
    <a href="/" class="nav-link">Login</a>
    <a href="/" class="nav-link">Logout</a>
    <a href="/" class="nav-link">Profile</a>
  </div>
</nav>

效果说明 #

• 屏幕宽度大于500px时，保持原有布局：公司名在左，导航链接在右侧均匀分布
• 屏幕宽度小于等于500px时，菜单自动折行到公司名下方，链接横向均匀铺满整行，不需要汉堡菜单做折叠，完全符合预期效果

注：代码里标注「可选」的样式都是观感优化项，可以根据自己的设计需求删掉调整，核心折行逻辑只需要加flex-wrap:wrap、再在媒体查询里让两个子元素占100%宽度就能生效。

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