html - 调整大小时导航栏背景图像不展开

Question

我的导航栏有一个图像背景，当我将屏幕调整为移动设备大小时，当我按下汉堡菜单时，我希望该背景图像随菜单一起展开。有什么建议吗？

如果我的导航栏背景默认是彩色的，它会展开。

.navbar {
  background-image: url('/images/HEADER.png');
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  top: -10px!important;
  height: 110px;
}

.navbar-toggler {
  outline: none!important;
}

.nav-link {
  color: black;
  font-family: myriad-pro, sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  line-height: 10px;
  font-size: 0.8rem;
}

.nav-link:hover {
  color: white;
}

<nav class="navbar navbar-expand-lg fixed-top">
  <a class="navbar-brand ml-lg-5 pl-5" href="#"><img height=7 0px; class="img-responsive" src="images/logo.png" alt=""></a>
  <button class="mb-2 navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <div id = "hamburger">
        <div class = "one"></div>
         <div class = "one"></div>
         <div class = "one"></div>
    </div>
                </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto mr-5 pr-5">
      <li class="nav-item active">
        <a class="nav-link" href="#pagrindinis">Pagrindinis<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#paslaugos">Paslaugos</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#portfolio">Atlikti Darbai</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#apie">Apie Mus</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#kontaktai">Kontaktai</a>
      </li>

    </ul>
  </div>

</nav>

标签： htmlcsstwitter-bootstrapbootstrap-4