Bootstrap 4 Navbar changes - html

Question

These are probably really simple questions, but it has me a bit stumped the CSS;
How can i make the green background (on a nav-item hover) take up the full height of the navbar?
Additionally, when the navbar is collapsed (for small/mobile screens) how can i center the nav-item text & add a border-bottom for the nav-item?
Here's my HTML
<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's my CSS:
.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;
}
And here's a Plunker of it;
Bootstrap Navbar

Answer 1

First of all you need to add jquery before bootstrap js and add this custom css for what you want
/* Styles go here */
.navbar-custom {
background-color: #fff !important;
border-bottom: 2px solid #f1f1f1 !important;
}
/* change the color of active or hovered links */
.navbar-custom .container-fluid .nav-item.active .nav-link,
.navbar-custom .container-fluid .nav-item:hover .nav-link {
color: #ffffff;
background-color: green; /* add background-color to active links */
}
<link data-require="bootstrap#4.1.3" data-semver="4.1.3" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script data-require="jquery#3.2.1" data-semver="3.2.1" src="https://cdn.jsdelivr.net/npm/jquery#3.2.1/dist/jquery.min.js"></script>
<script data-require="bootstrap#4.1.3" data-semver="4.1.3" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style type="text/css">
.navbar-custom{
padding-top:0rem;
padding-bottom:0rem;
}
.nav-link {
display: block;
padding: 1rem 1rem;
}
#media (max-width: 991px){
.navbar-custom{
padding-top:0.5rem;
padding-bottom:0.5rem;
}
.nav-link {
display: block;
padding: 0.5rem 1rem;
}
.navbar-light .navbar-nav .nav-link {
text-align:center;
}
.navbar-light .navbar-nav .nav-item {
border-bottom:5px solid #000000;
}
}
</style>
<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>

Answer 2

You can used below code for nav-item hover and text-center nad boredr-bottom for small/mobile screens.
.nav-item:hover{
background-color:green;
}
.collapse.show{
text-align:center;
}
.collapse.show .nav-item{
border-bottom:1px solid black;
}
Please show this link for that. https://jsfiddle.net/DharaSumitPatel/8h1cwezq/

Answer 3

Try changing your css with this
<style>
.navbar-custom {
background-color: #fff !important;
border-bottom: 2px solid #f1f1f1 !important;
padding:0px;
margin:0px;
}
.navbar-custom .container-fluid .nav-item.active .nav-link,
.navbar-custom .container-fluid .nav-item:hover .nav-link {
color: #ffffff;
background-color: green;
border:2px solid green;
}
#navbarToggler.show{
text-align:center;
}
#navbarToggler.show
.nav-item{
border-bottom:1px solid gray;
}
</style>
<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>