I have customized some elements created using Bootstrap 4 by adding a unique class called ukzcol to change the background color. It works perfectly fine in the navigation section. Here is the ukzcol class:
.ukzcol {
background-color: rgb(0, 23, 51) !important;
}
<nav class="nav navbar-nav ukzcol text-white border-bottom sticky-top">
<div class="row">
<div class="col-6">
<div class="nav-item navbar-brand ml-3 ">
<img src="logo.png" alt="logo" />
</div>
</div>
<div class="col-6">
<div class="float-right mr-5 h-100" id="sidebar">
However, when applying the ukzcolhv class to change the background color on hover, it seems to not work in Chrome but works in Edge.
Here is the ukzcolhv class:
.ukzcolhv:hover {
background-color: rgb(3, 35, 75) !important;
}
I've tried adding -webkit prefixes, but the issue persists. Is there a solution to make it work across all browsers?