So entfernen Sie Leerraum auf der rechten Seite meines Hamburgermenüs

Question

Wie Sie auf den folgenden Screenshots sehen können, überschneidet sich mein Hamburgermenü mit meinem Logo, was nicht passieren würde, wenn das Hamburgermenü rechts ausgerichtet wäre.

Ich habe bemerkt, dass die Tatsache, dass es nicht nach rechts ausgerichtet war aufgrund der Linie "right: 68px;", aber ohne es kann ich nicht content: "--> menu" auf der linken Seite des Hamburgers platzieren.

Wie kann ich das beheben?

Vielen Dank,

.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

Also, zu beheben Ihr erstes Problem sollten Sie eine feste Breite für die Schaltfläche. 25px scheint mir passend. Aber wenn Sie das tun, werden Sie einige andere Probleme bekommen, weil der Knopf semantisch sehr seltsam gemacht wird. Wenn Sie die pseudo :: after Klasse ändern, um auch eine feste Breite zu haben, sollte es gut funktionieren.

.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; 
} 

Aber ich würde Ihnen raten, die zu entfernen „Menü ->“ ganz, wie es normalerweise der Hamburger ist genug, um die Navigation anzuzeigen.

Answer 2

ich Text zu meinem eigenen Hamburger Menü nur hinzugefügt, aber tat es wie folgt aus:

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

gestylt dann die letzte Spanne je nach Bedarf. Ist das eine Möglichkeit?