Top Nav Menu: Change Colors On Hover

Discussions

Ted @ Crowdstack

For the top navigation menu, if you want to have each menu item change color when you hover it, add this custom CSS:

/* the following sets the background color for the menu item on hover */
.top-bar-section li:hover:not(.has-form) a:hover:not(.button) { 
background-color:#444444; 
}
.top-bar-section li.active:hover:not(.has-form) a:hover:not(.button) { 
background-color:#444444; color:#fffff0; 
}
/* the following sets the text color and icon color for the menu items on hover */
.top-bar-section ul li:hover:not(.has-form) > a,  .top-bar-section ul li:hover:not(.has-form) > a:hover i.fa  { 
color:#fffff0; 
}

You'll want to of course set your own hexadecimal colors for each color value above.

Tags: CSS, menu, hover, Nav, navigation

Add Reply

<ul id="{%=id%}ButtonGroup" class="button-group h-popup-buttons even-button-group even-1">
    <li id="{%=id%}Okay_buttonContainer"><a id="{%=id%}Okay" href="javascript:void(0);" class="button success no-margin-bottom h-alert-modal-ok-button" role="button">OK</a><script type="text/javascript">
        (function() {
            function {%=id%}Okay_click(event, data) {
            {%=id%}Popup.hide();
        }
        
                $('#{%=id%}Okay').on('click', {%=id%}Okay_click);
        })();
    </script></li></ul><a href="javascript:void(0);" class="close-reveal-modal" aria-label="Close Modal">&#215;</a><div class="last-modal-focus focus-utility-element" tabindex="0"></div>
</div>
<script type="text/javascript">
        (function() {
            {%=id%}Popup = new SS.Popup.ModalPopup('{%=id%}');
        })();
    </script>

Skip to main content

Discussions

Add Reply

Membership Required

Remove From Your Block List

Block

Please wait...