[Resolved] Adding hover links to menu

[Brian]

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

[Ying]

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 🙂

[Brian]

Thank you Ying. That works. You might want to update the help documentation.

[Ying]

Glad to hear that 🙂

The CSS in documentation should work for most users, it’s just your menu has a different class.

[Brian]

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.

[Ying]

I’m actually not sure, your menu items are missing some default CSS classes, how did you add them?

[Brian]

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?

[David]

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

[Brian]

That was it David, thanks for your help.

[David]

Glad to be of help

[Author]

Posts