css - 如何删除汉堡菜单右侧的空白区域

Question

正如您在下面的屏幕截图中看到的，我的汉堡菜单与我的 Logo 重叠，如果汉堡菜单右对齐，则不会发生这种情况。

我注意到它没有右对齐的事实是由于行 "right: 68px;" 但没有它我无法放置 content: "- -> 菜单” 在汉堡包的左侧。

我该如何解决这个问题？

非常感谢，

.navbar-toggle::after {
    color: #000;
    content: "→ Menu";
    font-size: 15px;
    font-style: normal;
    position: relative;
    right: 68px;
    text-transform: uppercase;
    top: -21px;
}

.navbar-toggle {
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    float: right;
    margin-bottom: 8px;
    margin-right: 15px;
    margin-top: 8px;
    padding: 9px 10px;
    position: relative;
}

HTML

<header class="navbar boxed js-navbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a class="brand" href="index.html">
        <img alt="" src="images/logo.png">
        <div class="brand-info">
          <div class="brand-name">John Livingstone</div>
          <div class="brand-text">activity desc</div>
        </div>
      </a>

      <div class="social-list hidden-xs">
        <a href="" class="icon ion-social-twitter" target="_blank"></a>
        <a href=""></a>
        <a href="" class="icon ion-social-linkedin" target="_blank"></a>
      </div>

      <div class="navbar-spacer hidden-sm hidden-xs"></div>

      <address class="navbar-address hidden-sm hidden-xs">Blablabla header</span></address>

    </header>

Answer 1

因此，要解决您的第一个问题，您应该为按钮设置固定宽度。 25px 似乎适合我。但是如果你这样做，你会遇到一些其他问题，因为按钮在语义上做得很奇怪。如果您将伪::after 类也更改为具有固定宽度，它应该可以正常工作。

.navbar-toggle::after {
    color: #000;
    content: "→ Menu";
    font-size: 15px;
    font-style: normal;
    position: relative;
    right: 80px;
    text-transform: uppercase;
    top: -21px;
    width: 80px;
    display: block;
}

.navbar-toggle {
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    float: right;
    margin-bottom: 8px;
    margin-right: 15px;
    margin-top: 8px;
    padding: 9px 10px;
    position: relative;
    width: 25px;
}

但我建议您完全删除“菜单 ->”，因为通常汉堡包足以指示导航。