Adding Sub Menu Hover Underline Animation

Hi there,

Take a look at this: https://generatepress.com/forums/topic/dropdown-menu-mouseover-styling/#post-395615

Hi,

Thanks it did work but not completely. Please see my website.

There are two things to be resolved:

1) Dropdown menu item underline is cross through the sub menu name. How to set it?

2) The current / active main menu item should also be underlined when its dropdown item is underlined.

Please help me to resolve this.

Thank you
Muzaffar

This is my current code:
/* nav links effect - Underline */
@media (min-width:769px) {
.main-navigation .menu .menu-item > a::after {
content: "";
position: absolute;
right: 0;
left: 55%;
bottom: 12px;
-webkit-transform: translateX(-50%);
transform: translateX(-45%);

display: block;
width: 0;
height: 2px;

background-color: currentColor;
transition: 0.3s width ease;
}
.main-navigation .menu .menu-item.current-menu-item > a::after,
.main-navigation .menu .menu-item > a:hover::after {
width: 50%;
}
}

You could try adding this CSS:

.main-navigation .menu .sub-menu .menu-item > a:hover::after,
.main-navigation .menu .sub-menu .menu-item.current-menu-item > a::after {
    bottom: 0;
    left: 20px;
    transform: translateX(0);
    width: calc(100% - 40px);
}

Thanks a lot Tom. You are great.

Just one more thing, as pointed out in my above post. The current / active main menu item should also be underlined when its dropdown item is underlined or active.

I will appreciate your help.

Thank you
Muzaffar

Edited the code above :)

Hi Tom,

The main menu item still not showing underline when its dropdown menu item is underlined. I have copied the CSS code same as you edited.

Your help is highly appreciated.

Thanks
Muzaffar

Just adjusted the CSS here to handle current ancestor items as well: https://docs.generatepress.com/article/adding-menu-hover-animation/

Hi Tom,

Sorry, it is not underlining main menu items. Even not on hover. Previously it was underlining on hover.

I didn't update my live website. Checked on local website.

Please fix the issue.

Thank you
Muzaffar

Hi Tom,

Sorry, it is not underlining main menu items. Even not on hover. Previously it was underlining on hover.

I didn't update my live website. Checked on local website.

Please fix the issue.

Thank you
Muzaffar

Ah sorry about that - just updated it.

Hi Tom,

Sorry I am confused. I am using following CSS, can you please make the changes in my following code for things work for me.

Thanks
Muzaffar

----------- Current CSS Live Code ---------------------
/* nav links effect - Underline */
@media (min-width:769px) {
.main-navigation .menu .menu-item > a::after {
content: "";
position: absolute;
right: 0;
left: 55%;
bottom: 12px;
-webkit-transform: translateX(-50%);
transform: translateX(-45%);

display: block;
width: 0;
height: 2px;

background-color: currentColor;
transition: 0.3s width ease;
}
.main-navigation .menu .menu-item.current-menu-item > a::after,
.main-navigation .menu .menu-item > a:hover::after {
width: 50%;
}

.main-navigation .menu .sub-menu .menu-item > a:hover::after,
.main-navigation .menu .sub-menu .menu-item.current-menu-item > a::after {
bottom: 0;
left: 20px;
transform: translateX(0);
width: calc(100% - 40px);
}
}
-------------- End of CSS ----------------------

Replace:

.main-navigation .menu .menu-item.current-menu-item > a::after,
.main-navigation .menu .menu-item > a:hover::after {
    width: 50%;
}

With:

.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
.main-navigation .menu > .menu-item > a:hover::after {
    width: 50%;
}

Thanks a lot Tom.

It is resolved.

You're welcome :)