Archived topic
How to animate the underline on a menu item on hover
17 replies · Started by Laura on November 22, 2021
I want to animate the bottom border of a nav item and offset it. I've tried the css solutions I've found in other threads but haven't been able to make any of them work.
I'm using the Mega Menu plugin.
I was able to change the font weight of the links with this.
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
font-weight: 600;
}
I tried:
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a::after {
content: “”;
position: absolute;
right: 0;
left: 50%;
bottom: 15px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
display: block;
width: 0;
height: 2px;
background-color: currentColor;
transition: 0.3s width ease;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a::after a::after,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a:hover::after {
width: 50%;
}
But it didn't work. Perhaps I don't have the selectors quite right?
I got that code from:
https://generatepress.com/forums/topic/animated-underline/
So those are the class selectors. Can anyone help out with how to animate the bottom border and offset them, also with display block I think to limit the line to width of the text in the menu item?
Thanks so much in advance.
Hi Laura,
Any chance you can link us to the site in question?
You can use the private information field.
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
Let me know :)
See private window.
Hi Laura,
Can you temporarily lift maintenance mode so we can check?
Alternatively, you can provide us temporary dashboard access to check things directly from the backend.
You can provide the site details on the private information text field or perhaps contact us through the contact page - https://generatepress.com/contact/ - and continue w/ this through email conversations incase we need to share screenshots back and forth. :)
Let us know. :D
Hi Elvin,
Thanks. I just sent a query to the contact link.
Received. Thanks! :)
Please see my reply in it. We can continue there. :D
I don't see an email response?
The contents of the message was:
Hi Laura,
We're unable to check the site as it automatically redirects to the homepage in maintenance mode when we log in. This makes the dashboard inaccessible.
Can you temporarily deactivate the maintenance mode plugin and/or any redirection plugin that may be causing it so we can check?
Let us know. :)
Even w/ the credentials provided, the site wasn't viewable as we're being redirected to the maintenance page on login.
That said, can you temporarily disable it?
I can not disable maintenance mode, the site is not ready to be live. Please see private info box.
Hi Laura,
The link you provided already has the hover effect you are looking for, so what's the issue here?
Let me know if I miss anything :)
It does but I was asking...how to make it be the length of the letters not the width of the container the menu item is in. For example, in the footer, see how it goes the whole width? In other versions of this effect it's just under the letters of the menu item, not the width of the widget. See what I mean?
Try add this CSS:
.mega-menu-wrap > ul > li.mega-menu-item > a {
display: inline-block !important;
}That worked great, thanks so much!
Do you know if there is a way to make it work on mobile? This is just desktop.
Were you aiming for something like this?
[redacted]
If so, we need to override the CSS used by the menu.
try adding this CSS:
ul#mega-menu-primary li.mega-menu-item {
padding: 0px 0px 0px 30px !important;
}
ul#mega-menu-primary li.mega-menu-item a.mega-menu-link {
padding: 0px !important;
}
ul#mega-menu-primary li.mega-menu-item a.mega-menu-link:after {
left: 0 !important;
}Please see private box.
