Whenever I hover over the links on my menu, underlines slide in and out. However, I am facing an issue where the padding I added to the left and right of the links is not displaying correctly.
Here is a visual representation of what I am trying to achieve (pay attention to how the active link's underline has padding on both sides, extending beyond just the text): https://i.sstatic.net/gFc7D.png
You can view my code on JSFiddle.
I came across a suggestion on Stack Overflow that the issue might be related to the display property. I have tried changing it to inline-block or block, but that did not solve the problem.
Below is my HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav_Wrapper_dk">
<nav id="dk_Nav" role="navigation" class="cf">
<div><a href="#home" class="link_Button sliding-u-l-r scroll">Home</a> </div>
<div><a href="#about" class="link_Button sliding-u-l-r scroll">About us</a></div>
<div><a href="#link3" class="link_Button sliding-u-l-r">Gallery</a></div>
<div><a href="#link4" class="link_Button sliding-u-l-r">Find Us</a></div>
<div><a href="#link5" class="link_Button sliding-u-l-r">Contact</a></div>
<div><a href="#link6" class="link_Button sliding-u-l-r">Catering</a></div>
<div><a href="#link7" class="link_Button sliding-u-l-r">Blog</a></div>
</nav>
</div>
<div id="home"></div>
<div id="about"></div>
My CSS:
#nav_Wrapper_dk {
position: fixed;
width: 100%;
height: 50px;
background: white;
border-bottom: 1px solid #f1f1f1;
}
#dk_Nav {
max-width: 1280px;
/* width: 742.6167px; */
height: 50px;
margin-left: auto;
margin-right: auto;
top: 0;
right: 0;
left: 0;
z-index: 2001;
}
#dk_Nav div {
margin-top: 11px;
}
#dk_Nav #logo_dk {
margin-top: 0px;
}
.link_Button {
display: block;
float: left;
height: 40px;
font-family: 'Open Sans', sans-serif;
font-size: .7em;
color: black;
line-height: 3.3em;
text-transform: uppercase;
letter-spacing: .2em;
padding-left: 12px;
}
/* LEFT TO RIGHT */
.sliding-u-l-r {
display: inline-block;
}
.sliding-u-l-r:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .3s ease, background-color .3s ease;
}
.sliding-u-l-r:hover:after {
width: 100%;
background: black;
}
.sliding-u-l-r.active:after {
width: 100%;
background: black;
}
#home {
width: 100%;
height: 1000px;
background: #ccc;
}
#about {
width: 100%;
height: 1000px;
background: white;
}
My JAVASCRIPT
// Scroll Menu
$(function() {
$("nav a").click(function() {
//**Add class active to current clicked menu item and remove class active from other menu item**//
$(this).addClass('active').parent().siblings().children().removeClass('active');
//** Smooth scroll Logic **?
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Can someone please point out what mistake I might be making?
Thank you in advance!