Цвет фона для ссылок Navbar

Question

Я уже определил свой Навбар, и он отлично работает, за исключением того, что я хочу также добавить полный фон страницы для ссылок Навбара. В настоящее время, когда я хочу открыть страницу на мобильном устройстве, фон ссылок не охватывает всю страницу по горизонтали, а выглядит как выделенная линия. Для более подробной информации смотрите скриншоты. Буду признателен, если кто-нибудь сможет мне помочь с этим. Спасибо!

<nav class="navbar navbar-expand-sm navbar-dark fixed-top">
  <a class="navbar-brand" href="#backrondimage"><img src="img/homepage.png" alt="" class="hompagecover"></a>
  <button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar4">
          <span class="navbar-toggler-icon"></span>
      </button>
  <div class="collapse navbar-collapse" id="collapsingNavbar4">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#div1" class="navbaritems"> Portfolio </a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#div2" class="navbaritems">About</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#div3" class="navbaritems">Contact</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#div4" class="navbaritems">Resume</a>
      </li>
    </ul>

    <ul class="navbar-nav">
      <li class="nav-item active">
        <a href="mailto:abdullah.ameenn@gmail.com" target="_blank"><img src="img/email.png" style="width:35px;height:35px;border-radius:25px;"></a>&nbsp&nbsp&nbsp
      </li>
      <li class="nav-item active">
        <a href="https://www.linkedin.com/in/abdullahameen/" target="_blank"><img src="img/linkedin.png" style="width:35px;height:35px;border-radius:25px;"></a>&nbsp&nbsp&nbsp
      </li>
      <li class="nav-item active">
        <a href="https://twitter.com/AbdullahAmeenn?lang=en" target="_blank"><img src="img/twitter.png" style="width:35px;height:35px;border-radius:25px;"></a>&nbsp&nbsp&nbsp
      </li>
    </ul>
  </div>[![enter image description here][1]][1]
</nav>

Answer 1

Попробуйте добавить следующий стиль:

.navbar.scrolled .navbar-collapse{
    background: #116980;
    margin: -15px;
    padding: 15px;
    z-index: -1;
}

Приведенные выше строки будут назначать цвет фона .navbar-collapse при прокрутке вниз. Однако, поскольку .navbar-collapse содержит поле, приведенный выше код удалит поле и изменит его на отступ , в то время как переместит .navbar-collapse назад , чтобы оно не покрывало .navbar-brand и. Navbar-Toggler.

Answer 2

Вы можете попробовать это:

<nav class="navbar navbar-expand-sm navbar-light fixed-top p-0">