Archived topic
Adding hover links to menu
9 replies · Started by Brian on April 28, 2021
I am trying to add a hover effect to the menu links, I tried the code here: https://docs.generatepress.com/article/adding-menu-hover-animation/ and also the code here: https://generatepress.com/forums/topic/how-to-add-a-hover-underline-in-primary-navigation/ but neither seemed to work. I suggest my links might have different css class names?
Would you mind having a look?
Also is it possible that the active page stayed underlined?
It would be good to add an underline option to the menu options as it seems to be a common request from users.
Thanks
Hi Brian,
I modified the CSS, try this one:
@media (min-width: 769px) {
.main-navigation .menu > .page_item > a::after {
content: "";
position: absolute;
right: 0;
left: 50%;
bottom: 15px;
-webkit-transform: translate3d(-50%,0,0);
transform: translate3d(-50%,0,0);
display: block;
width: 0;
height: 2px;
background-color: currentColor;
transition: 0.3s width ease;
}
.main-navigation .menu > .page_item.current-menu-item > a::after, .main-navigation .menu > .page_item:hover > a::after {
width: 50%;
}
}Let me know how it works :)
Thank you Ying. That works. You might want to update the help documentation.
Glad to hear that :)
The CSS in documentation should work for most users, it's just your menu has a different class.
Any idea why mine is different? It’s a new install of GP and GB
Is it because I used a child theme?
Just curious.
I'm actually not sure, your menu items are missing some default CSS classes, how did you add them?
I actually did not even add the links, these are the default pages. I only started to create the site yesterday using a clean install of GB and GP. Is something different in GP premium 2?
Hi there,
that would mean you have not created a Menu and assigned it to the Navigation - in that instance WP auto generates a menu that has only the page_item class
That was it David, thanks for your help.
Glad to be of help
