I have successfully implemented a fixed and sticky menu with a progress bar that resembles an underline. However, I am facing an issue with positioning the progress bar correctly under each menu section. For example, when a user hovers over the first section (call data), the progress bar loads, but it does not align perfectly under the menu. I need assistance in fixing this issue to ensure that the menu progress bar lines up correctly with each section.
Is there anyone who can help me correct this? I want the Menu Progress bar to be displayed directly under each section.
Here is the code on Fiddle. Please test it on a larger screen!
I have tried searching online for a solution but haven't found any relevant information so far.
.nav {
position: sticky;
top: 0;
overflow: hidden;
background-color: white;
position: -webkit-sticky;
/* Safari */
position: -moz-sticky;
/* firefox */
z-index: 5;
}
.nav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 24px;
text-decoration: none;
font-size: 17px;
}
.nav a:hover {
color: #42AC82;
}
.nav .icon {
display: none;
}
#menu_progress {
height: 3px;
width: 0%;
float: left;
background: #42AC82;
position: sticky;
top: 0;
overflow: hidden;
position: -webkit-sticky;
/* Safari */
position: -moz-sticky;
/* firefox */
z-index: 5;
}<div class="nav" id="myNav">
<a href="#call-data">Call Data</a>
<a href="#source">Source</a>
<a href="#lead">Lead</a>
<a href="#address">Address</a>
<a href="#motivation">Motivation</a>
<a href="#property">Property</a>
<a href="#visit">Visit</a>
<a href="#finish">Finish</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<div id="menu_progress"></div>
</div> //menu progress bar
$('.nav a').mouseover(function() {
var x = $(this).offset().left + $(this).width();
$('#menu_progress').animate({ width: x });
});