Menu
nav-pills list you would have to add this code to your style sheet:. nav-pills . nav-link. active { background-color: red;}I've updated snippet for that also.
The text color of the navigation bar can be changed using two inbuilt classes: navbar-light: This class will set the color of the text to dark. This is used when using a light background color. navbar-dark: This class will set the color of the text to light.
To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a . tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class . tab-content .
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With