Underline Active Nav in Jasper Template

Site URL: http://www.stephaniefalaschetti.com/

Hi there,

I am trying to get my nav to have an underline under the page that I am currently clicked on. Right now, my style has it set to be sea foam green, but I would like it to also have an underline under it so I can then just update it all to be black with a black underline. 

I've tried a few things and no luck. Would love some professional help!

Put this is custom css

.main-nav ul li.active-link a,

.main-nav ul li.active-link a:visited {
     border-bottom: 4px solid

#000000;
 }

@derricksrandomviews Thanks so much for getting back so quickly! I added it and its still not working 😕 

18 hours ago, Stephsteph said:

@derricksrandomviews Thanks so much for getting back so quickly! I added it and its still not working 😕 

Add this to Home > Design > Custom CSS

.nav-item.active a {
    text-decoration: underline;
}

@tuanphan omg it worked! thank you so much! Do you know if its possible to give it a little bit of spacing? right now it visual looks a lot closer to the word than my other hyperlinks, i think a pixel or two of space between the word and the underline would match it perfectly. Thoughts? http://www.stephaniefalaschetti.com/

13 hours ago, Stephsteph said:

@tuanphan omg it worked! thank you so much! Do you know if its possible to give it a little bit of spacing? right now it visual looks a lot closer to the word than my other hyperlinks, i think a pixel or two of space between the word and the underline would match it perfectly. Thoughts? http://www.stephaniefalaschetti.com/

 

Remove above code & use this

.nav-item.active a {
    border-bottom: 1px solid black;
    padding-bottom: 1px;
}