How can I make nav-items' background be completely filled with color not just a part of it?
Here is my try to use Bootstrap pills, but It doesn't do the job. Also, I tried my own CSS, but it's the same as pills.
To sum up, how can I make my navbar (in the image) looks like this one, regarding only the background color of nav-items CSS.
Update: Added HTML and CSS Code
My Code: HTML
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"><i class="fa fa-paw" aria-hidden="true"></i> Purrfection Shop</a>
<!--<i class="fa fa-home" aria-hidden="true"></i>
<i class="fa fa-sign-in" aria-hidden="true"></i>
<i class="fa fa-sign-out" aria-hidden="true"></i>-->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto nav-pills">
<li class="nav-item">
<a class="nav-link" href="#jumbotron">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about-container">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#footer">Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto nav-pills">
<li class="nav-item">
<a class="nav-link" href="#!"><i class="fa fa-user-plus" aria-hidden="true"></i> Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#!"><i class="fa fa-user" aria-hidden="true"></i> Login</a>
</li>
</ul>
</div>
</nav>
CSS:
.navbar {
border-bottom: 1px solid #F5F5F5;
background-color: white;
text-transform: uppercase;
letter-spacing: 2px;
}
background-color: blue;
and it has the same effect as pills from Bootstrap. @MuhammadUmar