如何刪除我的漢堡菜單右側的空白區域

正如您在下面的屏幕截圖中看到的，我的漢堡菜單與我的徽標重疊，如果漢堡菜單對齊到右側，則不會發生這種情況。如何刪除我的漢堡菜單右側的空白區域

我注意到它沒有與右邊對齊的事實是由於行"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>

來源

2017-08-06 Greg

如何在沒有html代碼的情況下幫助你？請分享它。 – Ehsan

嗨 - 我現在已經添加了HTML，但如果您使用我的文章中的鏈接看到它，可能是最好的。 TKS – Greg

因此，要解決您的第一個問題，你應該固定寬度的按鈕。 25px似乎適合我。但如果你這樣做，你會遇到一些其他問題，因爲按鈕在語義上做得很奇怪。如果您將僞::後類更改爲固定寬度，它應該可以正常工作。

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

但我建議您完全刪除「菜單 - >」，因爲通常漢堡包足以指示導航。

來源

2017-08-06 13:27:59 Chrisstar

我剛添加文本到我自己的漢堡包菜單，但這樣做是這樣的：

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

然後風格的最後一個跨度爲需要的。這有可能嗎？

來源

2017-08-06 13:29:46 wazz

如何刪除我的漢堡菜單右側的空白區域

回答

相關問題