several items highlighting on mouse over in a mega menu

Hey semiocode,
Sorry for the late reply, for your mega menu items please enable “custom classes” in the “Screen Options” panel in Menus:

then add a custom class, such as “same” to the menu items that are the same:

then add this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

.same > a {
	color: red !important;
    background-color: orange !important;
}

*EDIT* the css above is not for :hover this css is:

.same:hover > a {
	color: red !important;
    background-color: orange !important;
}

*EDIT BUT* this will not highlight all items when one is on :hover, for this please see the next post.
and adjust the colors to suit.
This is the expected results

Please give this a try, if you have any issues please link to your page so we can examine.

Best regards,
Mike

Hi,
Thank for your feedback, I see that I forgot you wanted this on hover, so if your menu items are in different columns and you want to highlight them all on one hover we will need to use jQuery because css can’t traverse the parent selectors.
Try adding this code to the end of your functions.php file in Appearance > Editor:

function custom_script() { ?>
    <script>
(function($){
	var same = $('.avia_mega_div .sub-menu li .sub-menu .same a');
      $(".same").mouseenter(function () {
        same.css({'background-color':'#FFA500'});
      });
      $(".same").mouseleave(function () {
        same.css({'background-color':''});
      });
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_script');

you will not need the previous css and adjust the color to suit. If this doesn’t work for you please link to your site so I can examine your mega menu structure.

Best regards,
Mike

Hi,
Thanks for the link to your site, first lets step back and review your use of “automated”, so if you mean that you want something “automated” that will scan all of the links in your mega-menu and then match all of the ones that link to the same page, which could be many different links, and then highlight them all when one of them has mouseover.
To do this automatically without manually adding a unique class to each of the menu items for each of the matching links will require more customization than we can offer within our support scope.
But if, lets say, that you want all of the links to /the-art-of-repair/ to be highlighted when one has mouseover, and you manually add the class “same” to all of the menu items with links to that page, then we probably can make this work. If in this case to want the links to another page to behave the same, you would then create a second custom class, such as “sames”, and manually add these to the menu items.
The difference between the two is that in the first example the script scans and matches the menu links based on url, in the second example you are manually marking (identifying) which links are the same by adding the custom class.
So when you say “automated” I’m thinking of a “hands-off” approach, as in the first example, and this would be much more involved than what we can assist here.
I would also like to explain what you are seeing in the menu when you are on the /the-art-of-repair/ page, all of the menu items that link to the current page (the page you are on) have the “current-menu-item” class, automatically based on the current url, once the class is added the css does it’s job.
But there is no class added to the menu items when on a different page, so there is nothing for the css rules to work on.
I hope that explains what you are seeing and how it relates to the over-all menu function.

So assuming that we will move forward with the second example where you will manually add the custom class “same” to all of the menu items that link to /the-art-of-repair/ page, when I check your mega-menu all of the items in the first column have the class “same”, but only one of these link to the /the-art-of-repair/ page, so you will need to adjust these, removing the custom class from all items except the ones linking to /the-art-of-repair/

Best regards,
Mike

Hi,
Glad to hear, I look forward to hearing back from you.

Best regards,
Mike