Bootstrap 3 Upgrade to Bootstrap 5 NavBar Issue - html

Question

I am responsible for upgrading Bootstrap from 3 to 5, and allow some minor UI changes, like px-wise changes. However I am suffering from navbar transition like the below discussed.
Here is the simplified version of my navbar using Bootstrap 3.
.image-header-logo {
margin: -5px;
height: 34px;
}
.custom-navbar {
box-shadow: 0px 0px 6px rgb(255 100 0);
}
.navbar {
border: 0px;
}
.navbar-nav > li.active {
box-shadow: inset 0px -5px 0px 0px rgba(255, 119, 0, 0.68);
}
.navbar-nav > li > a {
color: #ff6633;
}
.navbar-nav > li > a:hover {
background: rgb(255, 119, 0);
color: #ffffff;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar custom-navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img class="image-header-logo" src="https://www.gravatar.com/avatar/e8bf61002bf07be4ca6085c301f990c0?s=64" />
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right" >
<li><a class="nav-menu-item">Welcome</a></li>
<li class="active">
<a class="nav-selected-menu-item nav-text-color" href="#">Java</a>
</li>
<li>
<a class="nav-selected-menu-item nav-text-color" href="#">PHP</a>
</li>
</ul>
</div>
</div>
</nav>
And here is the new code using Bootstrap 5.
body {
font-size: 14px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.image-header-logo {
height: 2.5rem;
}
.navbar {
padding: 0 1rem;
margin-bottom: 6px;
}
.custom-navbar {
box-shadow: 0px 0px 6px rgb(255 100 0);
}
.nav-item {
cursor: pointer;
padding: 0.5rem 0;
}
.navbar .navbar-collapse .navbar-nav .nav-item.active {
box-shadow: inset 0px -5px 0px 0px rgba(255, 119, 0, 0.68);
cursor: pointer;
}
.navbar .navbar-collapse > .navbar-text,
.navbar .navbar-collapse .navbar-nav .nav-item > .nav-link {
color: #ff6633;
}
.navbar .navbar-collapse .navbar-nav .nav-item:hover {
background: rgb(255, 119, 0);
color: #ffffff; /* FIXME: not work == */
}
/* FIXME: need to add this, but in the outskirt it does not work */
.navbar .navbar-collapse .navbar-nav .nav-item > .nav-link:hover {
color: #ffffff;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light custom-navbar">
<a class="navbar-brand" href="/i/trade">
<img class="image-header-logo" src="https://www.gravatar.com/avatar/e8bf61002bf07be4ca6085c301f990c0?s=64" />
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#myNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar">
<span class="navbar-text ms-auto">Welcome</span>
<ul class="navbar-nav">
<li class="nav-item active px-1">
<a class="nav-link">Java</a>
</li>
<li class="nav-item px-1">
<a class="nav-link">PHP</a>
</li>
</ul>
</div>
</nav>
As it seems there is a rendering issue in stackoverflow, I have also place the code in jsfiddle.
The same codebase can also be found in jsfiddle.
Bootstrap 3: https://jsfiddle.net/hphchan/hfo9njc3/66/
Bootstrap 5: https://jsfiddle.net/hphchan/4yrxu8dk/60/
Most of the UI generated from the 2 version looks similar, but with the below issue.
When hover on nav-item but not nav-link in Bootstrap 5, as there is a padding in nav-item, making the hover color changes not work.
which can be seen in the picture below.
And here is the Bootstrap 3 version, which works in the edge.
I understand why it does not work due to the class structure change. However what I do not know is how to make the hover behavior the same.

Answer 1

You can emulate the behavior using the hover selector only for the nav-link class and forgetting the nav-item to simplify what style applies when hovered.
This way nav-link should have color: #ff6633 when not hovered and color: #ffffff when hovered:
.navbar .navbar-collapse>.navbar-text,
.navbar .navbar-collapse .navbar-nav .nav-item>.nav-link {
color: #ff6633;
}
.navbar .navbar-collapse .navbar-nav .nav-item>.nav-link:hover {
color: #ffffff;
background: rgb(255, 119, 0);
}
Also, remove the ** margin-bottom ** property for the .navbar.
The markup for the ul would be:
<ul class="navbar-nav">
<li class="nav-item active mx-2">
<a class="nav-link py-3 px-3">Java</a>
</li>
<li class="nav-item ms-2">
<a class="nav-link py-3 px-3">PHP</a>
</li>
</ul>
Working example:
body {
font-size: 14px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.image-header-logo {
height: 2.5rem;
}
.navbar {
padding: 0 1rem;
/* override default 0.5rem 1rem */
/* box-shadow: 0px 0px 6px rgb(255, 100, 0); */
/* TODO: placed in #header instead */
margin-bottom: 6px;
/* reserve space for the box-shadow */
}
.custom-navbar {
box-shadow: 0px 0px 6px rgb(255 100 0);
}
/* to create sadow on the bottom */
.nav-item {
cursor: pointer;
}
.navbar .navbar-collapse .navbar-nav .nav-item.active>.nav-link {
box-shadow: inset 0px -5px 0px 0px rgba(255, 119, 0, 0.68);
cursor: pointer;
}
/* to show orange in color on the line */
/* need to specify for so long, so that it can win without use of !important... == */
.navbar .navbar-collapse>.navbar-text,
.navbar .navbar-collapse .navbar-nav .nav-item>.nav-link {
color: #ff6633;
}
/* FIXME: need to add this, but in the outskirt it does not work */
.navbar .navbar-collapse .navbar-nav .nav-item>.nav-link:hover {
color: #ffffff;
background: rgb(255, 119, 0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">
<nav class="navbar navbar-expand navbar-light custom-navbar py-0">
<a class="navbar-brand" href="/i/trade">
<img class="image-header-logo" src="https://www.gravatar.com/avatar/e8bf61002bf07be4ca6085c301f990c0?s=64" />
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#myNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar">
<span class="navbar-text ms-auto">Welcome</span>
<ul class="navbar-nav">
<li class="nav-item active mx-2">
<a class="nav-link py-3 px-3">Java</a>
</li>
<li class="nav-item ms-2">
<a class="nav-link py-3 px-3">PHP</a>
</li>
</ul>
</div>
</nav>