Style parent header bar (x-bar-container) when hovering child (.x-anchor-text-primary)

[nblund]

Hi there,

I am trying to change height and background-color of header bar when hovering menu text with the following JS:

$(".x-anchor-text-primary").hover(function() {
$(this).closest(".x-bar-container").toggleClass(“hovered”)
});

and CSS:

.x-bar-container.hovered {
height: 50vh !important;
background-color: red !important;
}

However, no change in style appears. Please advise, thank you.

[prakash_s]

Hello @nblund,

Thanks for writing to us.

I checked your site it seems that you have not added the code that you shared. I went ahead and test on my end and it is working fine at my end. I would suggest you please add the code then check it again. If it doesn’t work for you please update the JS code.

jQuery(".x-anchor-text-primary").hover(function() {
jQuery(this).closest(".x-bar-container").toggleClass("hovered")
});

The purpose of providing custom Javascript is to show you how to add Javascript code to your site. Writing custom is outside the scope of our theme support. If you need more customization, you need to learn Javascript https://www.w3schools.com/jquery/ If you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[nblund]

Hi again. Sorry, I removed the code temporarily so you weren’t able to see it. It is back in its place now. I do have two problems though:

1
I want to change the class .x-anchor-text-primary to a class whereby the background on hover (see yellow background in the links below) will stay on for as long as I hover a menu item with children and anything below (sub-menu, dropdown, etc.). But neither

jQuery(".menu-item-has-children") nor
jQuery(".menu-item-has-children, .sub-menu *") nor any combination of .menu-item-has-children, . sub-menu, .x-dropdown, .x-active works perfectly

Have a look at the following two illustrations:

2
Also, I would like the animation when ‘unhovering’ on mouse out to work faster. I have read several of your answers in this forum about the issue, which say that this would require customisation. But they may be old because at least in the current version of Pro you can configure the transition speed of inline navigation top links, dropdown and siblings. Yet, the ‘mouse out’ animation is slower than the ‘mouse in’. Is there any way around this? Referring to the links above, you see that the yellow background is gone faster than the sub-menu, and to change that I would require 1.5s transition of the background, which would be much too long.

The issue was solved here: Menu transition too slow. I copied that, and it worked but caused my third level menu (sub-sub-menu) to be visible at all times - not just when hovering the sub-menu link.

Thanks.

[ruenel]

Hello @nblund,

Please be advised that custom coding is beyond the scope of our support. We are only limited to getting your site set up, bug fixes and minor cosmetic changes. You may need to contact a 3rd party developer to be able to accomplish what you have in mind.

1.) Please target specific elements in your JS code. For example:

function ($){
    $(".x-bar, .menu-item, .x-anchor, .x-anchor-text").hover(function() {
        // do something here
    });
})(jQuery); 

2.) You may need to use CSS Specificity or use added CSS selector on your code. For example:

.x-menu-inline > li > ul.sub-menu.x-dropdown {
  /* some CSS styling */
}

.x-menu-inline > li:hover > ul.sub-menu.x-dropdown {
   /* some CSS styling */
}

Hope this helps. Thank you for your understanding.