- This topic has 9 replies, 3 voices, and was last updated 4 years, 11 months ago by
.
-
Posts
-
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
Customer Support
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?
Customer Support
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_itemclassThat was it David, thanks for your help.
Glad to be of help
- You must be logged in to reply to this topic.
