Tagged: color change hover, customize css, submenu
I’m looking for two solutions for the fullwidth submenu located at https://www.rsindy.com/legal-services/intellectual-property-services-patents-trademark-copyright/
1) I’d like the fullwidth submenu item text to change color on hover.
2) Have the submenu item indicate which page is selected. This would be similar to the border underline that occurs when the current page is selected on the main menu.
Thanks,
Mandy
Hey mandystohry1,
Thank you for the inquiry.
1.) You can add this css code to change the color of the submenu items on hover:
#top .av-subnav-menu li a:hover {
color: red;
}
2.) And to highlight the active item, please add this script in the functions.php file:
function ava_custom_script() { ?>
<script>
(function ($) {
$(document).ready(function () {
var currentUrl = window.location.href;
$('.av-subnav-menu .menu-item a').each(function () {
if (this.href === currentUrl) {
$(this).parent().addClass('active');
}
});
});
}(jQuery));
</script>
<?php }
add_action('wp_footer', 'ava_custom_script', 99);
Then add this css code:
#top .av-subnav-menu li.active a {
color: blue;
}
Best regards,
Ismael
Thank you. This worked great!