I am currently experiencing an issue with a sliding animation on mouseover in the navigation. The animation works fine, but the problem arises when I hover over any menu item - the sliding bar starts from the very left instead of starting where the navigation items begin.
For reference, here is the JSFiddle
$(".mega-navigation--level-one").append("<span class='nav-hover'></span>");
var $magicLine = $(".nav-hover");
$magicLine
.width($(".active > a").innerWidth())
.css("left", $(".nav-hover").position().left - 400)
.data("origLeft", $magicLine.position().left)
.data("origWidth", $magicLine.width());
$(".mega-navigation--level-one > li").hover(function () {
$el = $(this);
leftPos = $el.position().left + 20;
newWidth = $el.width();
$magicLine.stop().animate({
left: leftPos,
width: newWidth,
opacity: 1
});
console.log($magicLine.data("origLeft"));
}, function () {
$magicLine.stop().animate({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
});.mega-navigation--level-one {
position: relative;
list-style: none;
padding: 0;
margin: 0 auto;
width:400px;
}
.mega-navigation--level-one > li {
display:inline-block;
margin: 0 10px;
}
.mega-navigation--level-one > li > a {
color:#000;
font-weight:bold;
text-decoration:none;
}
.nav-hover {
position: absolute;
bottom: -12px;
left: 0;
width: 100px;
height: 6px;
background: #04aa84;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="mega-navigation--level-one">
<li>
<a href="#">Menu Item 1</a>
</li>
<li>
<a href="#">Menu Item 2</a>
</li>
<li>
<a href="#">Menu Item 3</a>
</li>
</ul>