halten Hamburger Menü inline mit Logo

Question

Ich benutze die Standard-Navbar bootstrap 4 Hamburger-Menü kommt für kleinere Bildschirme als Par, aber beim Testen auf kleineren Bildschirmen wickelt es unter der Marke Navbar-Marke und ich kann nicht scheinen Finde den Teil von CSS, um ihn in der gleichen Zeile wie das Logo zu halten. Das Problem dabei ist, dass es den Header darunter auf kleineren Bildschirmen verdeckt, was für mobile Zuschauer nicht ideal ist.

Ich verwende CDN für die neueste Bootstrap 4 Beta

Hier ist der Link zu der Seite mit Ich spiele: link:

jemand mich in die richtige Richtung zeigen kann? Danke vielmals!

Die HTML Ich habe in sich wie folgt:

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> 

Die CSS ist:

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

HALLO Sie die gleichen Änderungen von Tweaking CSS machen können:

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