Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1472090

    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

    #1472103

    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

    #1472185

    Thank you. This worked great!

    #1472208

    Hi!

    Great! Glad to know that the suggestions worked. Please feel free to open another thread if you have more questions about the theme.

    Have a nice day.

    Regards,
    Ismael

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Submenu Custom CSS’ is closed to new replies.