[Resolved] Slide in underline effect on the main navigation

[Daniel]

Hey there,

I am currently transferring an Elementor built design from a pretty bloated and clunky themeforest theme, which admittedly is not officially compatible with Elementor at all, over to GeneratePress.
The speed increased by 50% easily just by switching the theme, ha! 🙂

I am now trying to recreate the slide in underline effect on the main navigation.
You can see how it currently looks on the *old* site here: thetaconnection.de

And here is what I got so far on the *new* site – mine is a bit slower, which I like.

(URL to the dev page in the website URL field so it’s not public)
Login: rb
PW: elegantowl

Now I managed successfully to create this sliding underline effect light weight using only CSS, BUT the underline is now way away from the links.
I tried messing around with margins and paddings on the various parts of the .main-navigation .main-nav ul li a class but to no success. Any idea how to move the underline closer to the links?
Here is my current CSS:

.main-navigation .main-nav ul li a
{
text-decoration:none;
display: inline-block;
color:black;
}

.main-navigation .main-nav ul li a:after 
{
content: '';
display: block;
height: 1px;
width: 0;
margin-bottom:20px !important;
background: transparent;
transition: width .5s ease, background-color .5s ease; /* .5 seonds for changes to the width and background-color */
-webkit-transition: width .5s ease, background-color .5s ease; /* Chrome and Safari */
-moz-transition: width .5s ease, background-color .5s ease; /* FireFox */
}

.main-navigation .main-nav ul li a:hover:after 
{
width: 100%;
background: black;
}

Also, I would like the underline to stay there when you click on a link, to indicate where the visitor currently is on the side. I have failed to do that as well.

Thanks so much for your help! 🙂

Daniel

[Daniel]

Oh damn, I just managed to solve this using the “Menu Item Height” setting.. sorry that was quite obvious!

The other question remains: How do I make the underline stick on active?

Thanks again!

[Leo]

Hi there,

You’d need something for .current-menu-item similar to the example here:
https://docs.generatepress.com/article/adding-menu-hover-animation/

[Daniel]

Hi Leo,

I have tried but all I managed to change using the code you linked is the hover effect (as the article does). Not sure how I target the “current” menu item correctly. Ideally it would keep the transitioning underline permanently when active. Is that at all possible?

Thanks for your help!

[Leo]

What about something like this:

.main-navigation .main-nav ul li[class*="current-menu-"] > a:after {
    width: 100%;
    background: #000;
}

[Daniel]

Thanks so much Leo!

That worked perfectly :))

[Leo]

No problem 🙂

[Author]

Posts