Looking at the image, it's clear that the active state (link 1) in jQuery has some styling issues. I want it to match the a:hover state seen at link three.
Check out the links here:
I've tried everything to make the .active state text line up with the other links but nothing seems to work. Any suggestions on how I can achieve this?
Links HTML:
<div class="col-12">
<div class="resources-links make-active" id="resources-nav">
<a id="tab1" class="tab active">link 1</a>
<a id="tab2" class="tab">link 2</a>
<a id="tab3" class="tab">link 3</a>
<a id="tab4" class="tab">link 4</a>
<a id="tab5" class="tab">link 5</a>
<a id="tab6" class="tab">link 6</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i id="resources-nav-chevron" class="fa fa-chevron-down"></i>
</a>
</div>
</div>
CSS:
.use-case-nav-bk {
background-color: #F9FAFA;
}
/*
#use-cases-nav .resources-nav {
height: 71px;
}
*/
#use-cases-nav .resources-links {
overflow: hidden;
background-color: #F9FAFA;
width: 96%;
padding-left: 40px;
margin: 0 auto;
}
#use-cases-nav .resources-links a {
float: left;
display: block;
color: #9b9999;
text-align: center;
padding: 28px 18px;
text-decoration: none;
font-family: Gilroy-Extrabold, sans-serif;
font-size: 16px;
}
#use-cases-nav .resources-links a:hover {
background-color: #B5B5B5;
color: #fff;
border-radius: 10px;
height: 10px;
padding-top: 8px;
padding-bottom: 42px;
margin-top:20px;
}
.resources-links .active {
color: #2359B9 !important;
background-color: #B5B5B5;
border-radius: 10px;
height: 10px;
padding-top: 8px;
padding-bottom: 42px;
margin-top:20px;
}
#use-cases-nav .resources-links .icon {
display: none;
}
Jquery:
$(document).ready(function(){
$('.make-active a').click(function(event){
$('.active').removeClass('active');
$(this).addClass('active');
event.preventDefault();
});
});