CODEWITHSUNDEEP
htmlcssbootstrap-4
John
John

Reputation: 73

Background color to Navbar links

enter image description hereI have already defined my Navbar and it works perfectly fine, except I want to give a full page background to the Navbar links as well. Currently when I want to open the page on a mobile device, the links background doesn't cover the whole page horizontally, but instead it looks like a highlighted line. For more detail see the screenshots. I would appreciate if someone can help me with this. Thanks!

<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:[email protected]" 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>

Upvotes: 2

Views: 515

Answers (2)

Aluminium Shek
Aluminium Shek

Reputation: 306

Try adding the below style:

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

The above lines would assign background color to .navbar-collapse when scrolled down. However since .navbar-collapse contains margin, the above code would remove the margin and change it to padding while move .navbar-collapse to back to prevent it from covering .navbar-brand and .navbar-toggler.

Upvotes: 1

Juan
Juan

Reputation: 131

You could try this:

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

Upvotes: 1

Related Questions