保持漢堡菜單內嵌徽標

Question

我使用標準的導航欄引導程序4漢堡包菜單進來的小屏幕作爲參考，但是，當在較小的屏幕上測試它包裹在navbar品牌的位置下，我似乎無法找到css的特定部分以保持它與標誌位於同一行上。問題在於它在較小的屏幕上遮擋了它下面的標題，這對於移動觀衆來說並不理想。

我使用CDN最新的自舉4測試版

這裏的鏈接到我與玩頁：link:

任何人都可以點我在正確的方向？非常感謝！

我在那裏得到的HTML如下：

HTML：

<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top"> 
    <div class="container-fluid navbrand"> 
    <a href="index.html" class="navbar-brand"><img src="img/sflogo.png" style="width:80%;height:80%;"/></a> 
     <button class="navbar-toggler" data-toggle="collapse" data-target="#hamburgerMenu"><span class="navbar-toggler-icon"></span></button> 
     <div class="collapse navbar-collapse" id="hamburgerMenu" style="opacity:1;"> 
     <ul class="navbar-nav ml-auto"> 
      <li class="nav-item"><a href="#" class="nav-link">Home</a></li> 
      <li class="nav-item"><a href="#" class="nav-link">About</a></li> 
      <li class="nav-item"><a href="#" class="nav-link">Services</a></li> 
      <li class="nav-item"><a href="#" class="nav-link">Contact</a></li> 
     </ul> 
     </div> 
    </div> 
    </nav> 
    <header id="home-section"> 
    <img src="img/headbg.jpg" style="width:100%; height:auto;" /> 
    </header> 
    <div class="underhead"> 
    We have "Goods In Transit" Insurance!<br /> 
    <span style="font-weight:normal;">Rest assured all your items will be covered during your move.</span> 
    </div> 

的CSS是：

body { 
    background-color: #fff; 
    color: #f2e000; 
} 

.navbar-light .navbar-brand { 
    font-weight:bold; 
    color: #f2e000; 
} 

.navbar-light .navbar-nav .nav-link { 
    color: #333; 
} 

.container .navbar-brand:hover { 
    color: #000; 
} 

.navbar { 
    opacity: 0.8; 
} 

.nav-link { 
    font-weight:bolder; 
    font-size: 20px; 
} 

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover { 
    color: #f2e000; 
} 

#home-section { 
margin-top:4.5em; 
} 

.underhead { 
    background:#f2e000; 
    color:#333; 
    text-align:center; 
    font-weight:bold; 
    font-size:2vw; 
    width:100%; 
    padding:20px; 
} 

@media (max-width:500px) { 
    .underhead { 
     font-size: 0.8em; 
    } 
} 

@media (max-width: 460px) { 
    .navbrand img { 
     width:40%; 
     height:40%; 
    } 
} 

Answer 1

HI，你可以通過調整CSS的變化做出相同的：

@media (max-width: 575px) { 
    button.navbar-toggler { 
     position: absolute !important; 
     right: 10px !important; 
     top: 14px !important; 
    } 
}