Javascript 下拉链接赢得'；t以块显示

我的手机登录和注册下拉菜单有问题。 我有一个函数，它添加了一个类，该类从标题中隐藏除第一个链接（站点名称）之外的所有链接，并放置一个按钮，onClick显示这些链接。但这些链接不会以块的形式显示，无论我做什么，它们始终是内联的，并且它们会推动子元素破坏整个设计。我应该为这两个链接单独制作div吗？但是这个潜水艇就看不见了。我真的不知道该怎么办了。 这是我的html：

      <div className="wrapper">
        <div className="brand" id="myTopnav">
          <a href="/#"><h1>{carrot}Plan your meal</h1></a>
   //this i want to hide  <a href="/#"><h3 className="login">Log In</h3></a>
   //this i want to hide  <a href="/#"><h3 className="signup">Sign Up</h3></a>
          <button className="icon" onClick={this.handleClick}>&#9776;</button>
        </div>

这是我的@mobile css：

.brand a:not(:first-child) {
  display: none;
}
.brand button {
  display: none;
}
.brand button.icon {
  float: right;
  display: block;
}
.brand h3 {
  font-size: 10px;
}
.brand h1 {
  font-size: 22px;
}
.brand.responsive {
  position: relative;
}
.brand.responsive button.icon {
  position: absolute;
  right: 0;
  top: 0;
}
.brand.responsive a {
  display: block;
  text-decoration: none;
}
.login {
  border: none;
}

也许我应该重写所有的链接，让它们成为ul？ 先谢谢你

这是我的GitHub回购：

---

和项目网站（按钮显示在767px下方）

您的链接中的

h3

向右浮动，因此它们不在

HTML

流中，因此您的

显示为

块，但没有内容

只需添加：

@media (max-width: 767px) {
.brand h3 {
    float:none;
}
}

谢谢，这很有帮助，但我还补充了：职位：相对；左：370px；因此，它更多地位于图标下方的右侧。我只是想让这个网站看起来像任何东西，我稍后会重建它，因为我想尽快关注React JS。
@media (max-width: 767px) {
.brand h3 {
    float:none;
}
}