로고가있는 햄버거 메뉴를 계속 유지합니다.

Question

표준 navbar 부트 스트랩 4 햄버거 메뉴를 사용하여 더 작은 화면을 파로 가져 오지만, 작은 화면에서 테스트 할 때 navbar 브랜드 위치 아래를 감싸고 있습니다. css의 particlar 부분을 찾아서 로고와 같은 행에 떠있게하십시오. 문제는 모바일 시청자에게 적합하지 않은 작은 화면에서 그 아래의 헤더를 가린다는 것입니다.

나는 최신 부트 스트랩 4 베타 여기

을 위해 CDN을 사용하고 내가 가지고 노는거야 페이지에 대한 링크입니다 : 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; 
    } 
}