使汉堡菜单与徽标保持一致

Question

我使用的是标准导航栏 bootstrap 4 汉堡菜单，用于较小的屏幕，但是，在较小的屏幕上进行测试时，它会包裹在 navbar-brand 位置下方，我不能似乎找到 css 的特定部分以使其与徽标浮动在同一行。它的问题是它在较小的屏幕上遮挡了它下面的 header，这对于移动观众来说并不理想。

我正在为最新的 bootstrap 4 Beta

使用 CDN

这是我正在玩的页面的link：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

嗨，您可以通过调整 css 更改来实现相同的效果：

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

使汉堡菜单与徽标保持一致

keep hamburger menu inline with logo

html

css

twitter-bootstrap

hamburger-menu