Bootstrap 4 hover on navbar links causes flickering - css

Question

I want to make my navbar links have a darker background color whenever I hover my mouse over them. It is working OK, but when I change padding (to 0px in this case) it starts to flicker: (View on full screen for better effect)
Also, the image link is not the same height as the other links(And when collapsed, it has this right blank space), and I can't get it in same line using the current styling rules.
**Edit: It's caused by the padding:0px!important, but that's because I do not want the hovering background to take the entire height. How to make the hovering background with less height?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.navbar {
min-height: 80px;
font-size: 0.8rem;
font-weight:500;
}
.navbar-brand {
padding: 0 15px;
height: 80px;
line-height: 80px;
}
.navbar-toggle {
/* (80px - button height 34px) / 2 = 23px */
margin-top: 23px;
padding: 9px 10px !important;
}
#media (min-width: 768px) {
.navbar-nav > li > a {
/* (80px - line-height of 27px) / 2 = 26.5px */
padding-top: 26.5px;
padding-bottom: 26.5px;
line-height: 27px;
}
}
.bottom-space {
margin-bottom: 20px;
}
#navbar_logged_in > a:link {
color: white ;
}
#navbar_logged_in > a:hover {
opacity:0.7 ;
}
#navbar_logged_in > a:visited {
color: white ;
}
#navbar_logged_in > li.nav-link{
color:white;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link{
background-color: #17A2B8;
}
body {
padding-top: 110px;
}
.main-nav a:hover {
background-color: #0D47A1!important;
padding: 0px!important;
}
</style>
<nav id="navbar_logged_in" class="navbar navbar-expand-lg navbar-light bottom-space fixed-top" style="background: linear-gradient(to right, #3399ff , #1a8cff, #0080ff, #0073e6);">
<div class="container">
<a class="navbar-brand mx-auto" href="#">
Logo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-right" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item main-nav">
<a class="nav-link" href="#" style="color:white;margin-right:25px;">
<img class="img-circle" src="Image" alt="Image" width="35" height="35" style="border-radius: 50%!important;">
</a>
</li>
<li class="nav-item main-nav">
<a id="homepage_link" class="nav-link" href="#" style="color:white">Homepage</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link" href="#" style="color:white">About</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link" href="#" style="color:white">Log Out</a>
</li>
</ul>
</div>
</div>
</nav>
What's causing that? How can I fix it?
Thanks

Answer 1

The flickering is caused because when you hover, you are removing the padding, which pulls the element out from under the cursor. This then stops the hover and reapplies the padding which puts it back under the cursor, triggering the hover state. Rinse and repeat.
To stop the flicker, you need these two styles to work together:
#media (min-width: 768px) {
.navbar-nav > li > a {
padding-top: 26.5px;
padding-bottom: 26.5px;
line-height: 27px;
}
}
.main-nav a:hover {
background-color: #0D47A1!important;
padding: 0px!important;
}
If you want the hovering background to take less height, replace the part that you don't want the background on with margin. This might look like:
#media (min-width: 768px) {
.navbar-nav > li > a {
padding: 6.5px 8px; /* top/bottom, sides */
margin: 20px 0px;
line-height: 27px;
}
}
.main-nav a:hover {
background-color: #0D47A1!important;
}
In short, don't make your box size change on hover, and if you don't want background, use margin instead of padding

Answer 2

The padding in the hover is causing the problem: padding: 10px!important;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.navbar {
min-height: 80px;
font-size: 0.8rem;
font-weight:500;
}
.navbar-brand {
padding: 0 15px;
height: 80px;
line-height: 80px;
}
.navbar-toggle {
/* (80px - button height 34px) / 2 = 23px */
margin-top: 23px;
padding: 9px 10px !important;
}
#media (min-width: 768px) {
.navbar-nav > li > a {
/* (80px - line-height of 27px) / 2 = 26.5px */
padding-top: 26.5px;
padding-bottom: 26.5px;
line-height: 27px;
}
}
.bottom-space {
margin-bottom: 20px;
}
#navbar_logged_in > a:link {
color: white ;
}
#navbar_logged_in > a:hover {
opacity:0.7 ;
}
#navbar_logged_in > a:visited {
color: white ;
}
#navbar_logged_in > li.nav-link{
color:white;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link{
background-color: #17A2B8;
}
body {
padding-top: 110px;
}
.main-nav a:hover {
background-color: #0D47A1!important;
}
</style>
<nav id="navbar_logged_in" class="navbar navbar-expand-lg navbar-light bottom-space fixed-top" style="background: linear-gradient(to right, #3399ff , #1a8cff, #0080ff, #0073e6);">
<div class="container">
<a class="navbar-brand mx-auto" href="#">
Logo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-right" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item main-nav">
<a class="nav-link" href="#" style="color:white;margin-right:25px;">
<img class="img-circle" src="Image" alt="Image" width="35" height="35" style="border-radius: 50%!important;">
</a>
</li>
<li class="nav-item main-nav">
<a id="homepage_link" class="nav-link" href="#" style="color:white">Homepage</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link" href="#" style="color:white">About</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link" href="#" style="color:white">Log Out</a>
</li>
</ul>
</div>
</div>
</nav>