Question

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

我注意到它没有与右边对齐的事实是由于行"right: 68px;"但没有它我不能将content: "--> menu"放在汉堡的左边。

我该如何解决这个问题？

非常感谢，

.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似乎适合我。但是，如果你这样做，你会遇到一些其他的问题，因为按钮在语义上做得非常奇怪。如果你将pseudo :: 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;
}

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

Answer 2

我刚刚将文字添加到我自己的汉堡包菜单中，但是这样做了：

<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span>Menu</span>

然后根据需要设置最后一个范围。这有可能吗？

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

2 个答案: