I have some simple CSS questions that are giving me a bit of trouble;
How can I make the green background take up the full height of the navbar on hover for a nav-item?
Also, how can I center the nav-item text and add a border-bottom when the navbar is collapsed on small/mobile screens?
Here is the HTML code:
<nav class="js-navbar-scroll navbar navbar-expand-lg navbar-light fixed-top navbar-custom">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="img/logo-design-new.png" alt="JDC Support" style="width: 40px;" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item mr-4 mb-2 mb-lg-0">
<a class="nav-link" href="about">About</a>
</li>
<li class="nav-item mr-4 mb-2 mb-lg-0">
<a class="nav-link" href="photos">Photos</a>
</li>
<li class="nav-item mr-4 mb-2 mb-lg-0">
<a class="nav-link" href="collections">Collections</a>
</li>
<li class="nav-item mr-4 mb-2 mb-lg-0">
<a class="nav-link" href="careers">Careers</a>
</li>
<li class="nav-item mr-4 mb-2 mb-lg-0">
<a class="nav-link" href="contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
Here is the CSS code:
.navbar-custom {
background-color: #fff !important;
border-bottom: 2px solid #f1f1f1 !important;
}
.navbar-custom .container-fluid .nav-item.active .nav-link,
.navbar-custom .container-fluid .nav-item:hover .nav-link {
color: #ffffff;
background-color: green;
}
For reference, here's a link to a Plunker showcasing it: Bootstrap Navbar