响应式顶部导航栏≤700px宽度时无法隐藏用户名标签如何解决

问题根源 #

用户名标签隐藏失效是两个CSS规则问题导致的：

1. 第二个700px宽度阈值的媒体查询中，.dropdowna .dropalvin 选择器缺少 .navbar.responsive 父级限定，同阈值下后面的规则优先级更高，直接覆盖了第一个媒体查询中设置的display: none，导致不管有没有点击汉堡菜单，用户名按钮始终显示。
2. 仅隐藏了用户名按钮本身，没有隐藏包裹它的.dropdowna容器，存在冗余布局隐患。

修复步骤 #

1. 修正媒体查询选择器 #

找到第二个@media screen and (max-width: 700px)规则块里的最后一条规则，修改为：

.navbar.responsive .dropdown .dropbtn,
.navbar.responsive .dropdowna .dropalvin {
  display: block;
  width: 100%;
  text-align: left;
}

2. 补充隐藏用户名容器规则 #

在第一个@media screen and (max-width: 700px)规则块的隐藏列表里加入.dropdowna，修改后如下：

@media screen and (max-width: 700px) {
  .navbar a:not(:first-child),
  .dropdown .dropbtn,
  .dropdowna, /* 新增这行，隐藏整个用户名容器 */
  .dropdowna .dropalvin,
  .one {
    display: none;
  }
  .navbar a.icon {
    float: right;
    display: block;
  }
}

3. 可选清理HTML冗余标签 #

你当前HTML里存在多处多余的</span>和无意义的<span>嵌套，建议清理避免布局异常。

修改后刷新页面即可生效：屏幕宽度≤700px未展开汉堡菜单时，用户名会和其他导航项一起隐藏，点击汉堡展开后正常显示在下拉列表中。

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