[thisisbbcParticipant]

Hi guys,
We are bit annoyed by the delay it takes before the menu appears when you hover a menu element. Is there any way to change that delay?
Cheers,
B

[NicoModerator]

Hi There,

Would you mind sending us your URL so we could take a closer look.

Thank you so much!

Cheers!

[thisisbbcParticipant]

Sure thing, sorry for that!

Here you go : http://trashfamily.staging.wpengine.com/

Regards,
B

[ZeshanMember]

Hi B,

Thanks for writing in!

Please add this code under Custom > CSS in the Customizer:

/* Avoiding Submenu Delay */
.x-navbar .desktop .x-nav li:hover > .sub-menu {
   display: block;
}

Hope this helps. 🙂

Thank you.

[thisisbbcParticipant]

Hi there!

Fantastic, it works like a charm, glad to see we could sort that out with just some CSS 🙂

However there’s still a delay when you hover a menu element for more than a second, it’s a weird behaviour, I recorded a screencast since it’ll be easier than explaining it with words : https://docs.google.com/file/d/0B_-JNDqwSUVYaVA4Z2FFZE93S3M/edit?usp=drivesdk

Regards,
Bastien

[RadModerator]

Hi there,

Try this one, the updated version.

/* Avoiding Submenu Delay */
.x-navbar .desktop .x-nav li > .sub-menu {
   display: none;
}
.x-navbar .desktop .x-nav li:hover > .sub-menu {
   display: block;
}

Cheers!

[thisisbbcParticipant]

Hi guys!

Getting closer to it but still some erratic behavior. The sub-menu now disappears as soon as the mouse stops hovering the menu element, which is fantastic. However, the parent, the menu element itself, still shows our black background for a short delay.

Here’s a screencast showing the problem, I’ve also pointed another issue which is surely related : https://docs.google.com/file/d/0B_-JNDqwSUVYdW5ZbFkxVXVTXzQ/edit?usp=drivesdk

Thank you again for your patience!

Kind regards,
Bastien

[RadModerator]

Hi there,

Could you try adding this css at your customizer’s custom css.

  .x-navbar .desktop .x-nav>li>a,  .x-navbar .desktop .x-nav>li.x-active>a {
  color: black !important;
  background-color: transparent!important;
transition: none !important;
}
  
  .x-navbar .desktop .x-nav>li>a:hover, .x-navbar .desktop .x-nav > .current-menu-item > a {
  color: #F5F5F5 !important;
  background-color: black!important;
}
    

It’s caused by .x-active that is being triggered upon hover.

Thanks!

[thisisbbcParticipant]

Hi guys,

Thank you for the snippet of code. After adding it I noticed the .x-active class was set to a transparent background but the menu should stay highlighted with the black background even when hovering the sub-menus.

I’ve tried this instead :

  .x-navbar .desktop .x-nav>li>a {
  color: black !important;
  background-color: transparent!important;
transition: none !important;
}
  
  .x-navbar .desktop .x-nav>li>a:hover, .x-navbar .desktop .x-nav > .current-menu-item > a,  .x-navbar .desktop .x-nav>li.x-active>a {
  color: #F5F5F5 !important;
  background-color: black!important;
}
    

But got the same result as previously. There’s a small delay before the .x-active class is removed… 🙁

I’m starting to think the only way to fix this will be to dive into the jquery script that adds/removes that class, unless there’s a way to do it via a custom function.

Waiting for your input, once again I appreciate your support.

Kind regards,
Bastien

[ZeshanMember]

Hi Bastien,

Please add following CSS as well:

.site .x-navbar .desktop .x-nav>li:hover>a, .site .x-navbar .desktop .x-nav > .current-menu-item > a {
  color: #F5F5F5 !important;
  background-color: black!important;
}

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding.

[thisisbbcParticipant]

Hey guys,

We won’t need to go any further because everything’s now working perfectly as expected 🙂
No more delays or anything, thank you so much for your patience!

Sincerely,
B

[NicoModerator]

No worries.

Thank you for your patience also.

Let us know if you need anything else.

Cheers!

[Author]

Posts