Docs

[andi90]

Hi guys,

I use the spa-demo, WordPress 4.5.3, X 4.6.0 and Cornerstone 1.3.0.
By default the submenu appears delayed when hovering-in and out over the parent menu item. I removed that with the help of the following post: https://community.theme.co/forums/topic/speed-of-drop-down-menus/#post-397888 which worked well. However, if I am hovering the submenu and un-hover, the box-shadow of the parent menu item fades out slowly and not immediately as wished. I am certain that there is a solution to that yet I don’t succeed in finding it.

Regards,
Andi

[andi90]

This reply has been marked as private.

[Christopher]

Hi there,

Please find this code :

.desktop .menu-item:hover>.sub-menu {
    transition: all 250ms linear;
    display: block;
    opacity: 1;
    visibility: visible;
}

And update it to :

.desktop .menu-item>.sub-menu,
.desktop .menu-item.x-active>.sub-menu {
    opacity: 0;
    visibility: hidden;
    display: block;
}

Add this as well:

.x-navbar .desktop .x-nav > li > a, .x-navbar .desktop .x-nav > li > a:hover {
    transition: none !important;
}

Hope it helps.

[andi90]

Hi,

thanks for the quick reply but it doesn’t help.
First of all, I don’t have any of the code you provided under “Please find this code” (or do I have to search in the files on the server?) and second of all the code you provided hides the submenu even if I hover over the parent item and doesn’t help with that problem of the box-shadow-transition as well. 😉
Just to be clear again: this is the only additional code that I’ve added to the custom CSS:

.x-navbar .desktop .x-nav li:hover > .sub-menu {
    display: block;
}

.x-navbar .desktop .x-nav li > .sub-menu {
    display: none;
}

This removes the slow fade-in and fade-out of the submenu but the problem that persists is that the green box-shadow on top of the parent element doesn’t fade out as quick as the whole submenu. In fact it stays there for 1 second after the cursor doesn’t hover over it anymore and that looks quite odd. This is what I mean (the green box-shadow over the “Services”-item):

Regards,
Andi

[Rue Nel]

Hey Andi,

Thank you for the clarification. I can see the delay of the grey line right above the menu item. In order to get rid of the line as quickly as you hover away from the menu item, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.site .x-navbar .desktop .x-nav > li > a,
.site .x-navbar .desktop .x-nav > .x-active > a {
    box-shadow: none;
}

.site .x-navbar .desktop .x-nav > li:hover > a,
.site .x-navbar .desktop .x-nav > li > a:hover, 
.site .x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: inset 0 4px 0 0 rgb(34,90,26);
}

Please let us know if this works out for you.

[andi90]

Hi!

Works like a charm! Thanks a lot, what a support! 🙂

[Nabeel A]

Glad we could help 🙂

Cheers!

[andi90]

Hi Nabeel,

there is another little detail that I need help with.
When I unhover a submenu-item, the parent menu item text stays in the hovered color for one second, same as with the border-box before. How is it possible to remove that?

Here is how the parent menu item (Services) looks like for one second when unhovering from the submenu:

And here is how it should look like when unhovered, like all other inactive menu items:

Regards,
Andi

[Rad]

Hi there,

Please add this CSS as well,

.menu-item-has-children > a {
  color:rgb(34,90,26) !important;
  }
  .menu-item-has-children:hover > a {
  color: hsl(124,63%,37%) !important;
  }

Thanks!

[andi90]

Hi!

Thanks a lot that worked. I was close to that, I just forgot the “!important” 😀

Regards,
Andi

[Christopher]

You’re welcome.

[Author]

Posts