- This topic has 18 replies, 4 voices, and was last updated 6 years, 3 months ago by Leo.
-
AuthorPosts
-
January 10, 2018 at 7:45 am #467631Muzaffar
Hi,
I wanted to have menu + submenu hover underline effect for my website and added css as on this link https://docs.generatepress.com/article/adding-menu-hover-animation/
—————————Start of CSS Custom 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%;
}
———————–End of CSS Code ——————————The hover effect for main menu items looking great but there is one issue, the sub menu items are not effected by this change.
I also want to have underline hover effect for my sub menu items.
Please let me know the changes in my CSS code?
Thanks
MuzaffarJanuary 10, 2018 at 9:33 am #467736LeoStaffCustomer SupportHi there,
Take a look at this: https://generatepress.com/forums/topic/dropdown-menu-mouseover-styling/#post-395615
January 11, 2018 at 3:26 am #468241MuzaffarHi,
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
MuzaffarThis 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%;
}
}January 11, 2018 at 9:49 am #468541TomLead DeveloperLead DeveloperYou 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); }
January 12, 2018 at 8:20 am #469292MuzaffarThanks 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
MuzaffarJanuary 12, 2018 at 9:36 am #469382TomLead DeveloperLead DeveloperEdited the code above ๐
January 12, 2018 at 10:09 pm #469790MuzaffarHi 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
MuzaffarJanuary 13, 2018 at 9:14 am #470085TomLead DeveloperLead DeveloperJust adjusted the CSS here to handle current ancestor items as well: https://docs.generatepress.com/article/adding-menu-hover-animation/
January 14, 2018 at 9:30 pm #471068MuzaffarHi 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
MuzaffarJanuary 14, 2018 at 9:30 pm #471069MuzaffarHi 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
MuzaffarJanuary 14, 2018 at 10:36 pm #471104TomLead DeveloperLead DeveloperAh sorry about that – just updated it.
January 14, 2018 at 10:59 pm #471115MuzaffarHi 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 ———————-January 15, 2018 at 8:41 am #471498TomLead DeveloperLead DeveloperReplace:
.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%; }
January 15, 2018 at 8:54 am #471513MuzaffarThanks a lot Tom.
It is resolved.
January 15, 2018 at 9:17 am #471530TomLead DeveloperLead DeveloperYou’re welcome ๐
-
AuthorPosts
- You must be logged in to reply to this topic.