Make menu item keep hover background when you mouse down to the dropdown

[cheshiredave]

This seems like an easy thing I’m missing in the header builder, but in my inline dropdown menu on https://beta.lifelearningacademysf.org/academics the main menu item changes background color as expected when hovering and the drop-down menu appears, but the main menu item background reverts to its normal state when you mouse down to the dropdown menu. In the header builder preview, the main menu item actually behaves the way I want it to, but on my actual site it doesn’t. Any insights?

Side note: I incorporated CSS/JS code from another forum post in order to eliminate the dropdown delay, but I don’t think that’s affecting this issue.

Thanks for any insights!

[nabeel]

Hi Cheshire,

Thank you for reaching out to us. To make this happen, Inspect your Navigation Inline element, go to Top Links tab and set the Interaction background color:

Now navigate to Dropdown tab, and set the Background Color:

This will make menu item keep the hovered background color while hovering on the dropdown.

If your setup is correct then the customization you have might be causing the issue, remove custom CSS, JavaScript and deactivate your child theme if using and switch to parent theme (take a complete backup first of your custom code).

Let us know how this goes!

[cheshiredave]

Ah, thanks! You were right – my setup was correct, but the JS that I had copied from another forum topic to help with removing the dropdown delay was causing that behavior. Here’s the JS code:

jQuery(document).ready(function($){
$(’.menu-item > a’).hover(function(){
$(this).addClass(‘x-active’);
}, function(){
$(this).removeClass(‘x-active’);
});
});

FWIW, taking the JS code out doesn’t seem to have significantly affected the dropdown speed. I wish it were instant but between zero delay and having the top-level menu stay highlighted on dropdown, I’ll take keeping the dropdown highlight color active.

Thanks again for pointing me in that direction – it was driving me bonkers because I thought I had used the header builder correctly, and I guess I had.

[nabeel]

Hey Cheshire,

Glad that we could be of help. It’s best to avoid custom code as much as possible because custom code will create issues and conflicts sooner or later.

Cheers!

[cheshiredave]

It was custom code that came from a Themeco support person like you.

[lely]

Hi Cheshire,

Yes, though we don’t support custom code anymore due to possible future conflicts. That’s why PRO is there now where you have the ability to set it on settings. Using Pro header builder means you can create the header you want unlike in X where you have a prebuilt header templates based on the stack you have chosen.