ハンバーガーメニューの右側の空白を取り除く方法

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

Answer 1

<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> 

だから、あなたの最初の問題を解決するためにあなたのボタンの固定幅する必要があります。 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; 
} 

しかし、私はあなたが削除するために助言する「メニュー - >」全く、など通常のハンバーガーは、ナビゲーションを示すには十分です。

Answer 2

私はちょうど私の自身のハンバーガーメニューにテキストを追加しましたが、このようにそれをやった：

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

その後、必要に応じて、最後のスパンをスタイリング。それは可能でしょうか？