In my navbar, I'm facing an issue where the color of the nav links returns to white when the hover cursor leaves the element. Is there a way to keep the color of the nav links even when the cursor is not on the hover elements? To illustrate, I've attached images showing the current output and the desired output. Currently, I am using Bootstrap for styling my navbar.
Desired Output:
https://i.sstatic.net/KZj3K.png
You can find more detailed information in my fiddle files shared below.
.dropdown:hover {
background-color: #f3f3f3;
border-top:5px solid #00BC54;
color:black !important;
}
.dropdown a:hover {
color:grey !important;
}
.nav-item:hover a {
/*color:gray !important;*/
}
#navbarDropdown:hover {
color:grey !important;
}
#navbarDropdown:focus {
color:grey !important;
}
.navbar {
padding-top:0px;
padding-bottom:0px;
}
.nav-item {
/* padding-top:5px;
padding-bottom:8px;
margin-right:50px;*/
padding-top:10px;
margin-right:60px;
padding-bottom:8px;
}
.nav-item #navbarDropdown {
font-size:13px;
font-weight: 500;
letter-spacing: 1px;
color:#F9F9F9;
}
li.nav-item:hover div.dropdown-menu,
div.dropdown-menu:hover {
display: block;
opacity: 1;
position: absolute;
z-index: 100000;
}
.nav-item #navbarDropdown:hover {
color:#575a5d !important;
}
.nav-item #navbarDropdown:not(:hover) {
color:white;
}
.navbar-expand-sm .navbar-nav .nav-link {
font-weight:400;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>