保持汉堡菜单与徽标一致

Question

我正在使用标准的导航栏引导 4 汉堡菜单，用于较小的屏幕，但是，在较小的屏幕上进行测试时，它会包裹在导航栏品牌位置下方，我似乎找不到 css 的特定部分来保持它与徽标浮动在同一行。它的问题在于它在较小的屏幕上掩盖了其下方的标题，这对于移动观众来说并不理想。

我正在使用 CDN 进行最新的引导程序 4 测试版

这是我正在玩的页面的链接：链接：

谁能指出我正确的方向？非常感谢！

我输入的 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

嗨，

您可以通过调整 CSS 更改来做同样的事情：

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