Public Ticket #2913822
How do I change Navigation Hover Color?


  • goodfolksmarketing started the conversation

    I have looked through other support tickets and learned to add the following code to Additional CSS to change navigation hover color:

    .main-navigation ul.menu li.menu-item > a:hover {

        color: #de9076;     border-bottom-color: #000000; }

    This worked for the drop down portion of my navigation, but it didn't apply to the main titles in the navigation menu. Help?

    *In the picture, you can see the main navigation is still green & I am trying to change it to yellow

    Attached files:  Screen Shot 2021-11-10 at 2.01.16 PM.png

  •  2,119
    Opal replied

    Dear mate,

    You can add code below in customizing css and change color you want.

    .header-1 .header-main .main-navigation .menu > li:hover > a, .header-1 .header-main .main-navigation .menu > li.current-menu-item > a, .header-1 .header-main .main-navigation .menu > li.current-menu-parent > a {
        color: #9aa55d;


    WpOpal Support Team

    We are located in GMT +7 time zone and we answer all questions within 12-48 hours in weekdays. In some rare cases the waiting time can be to 48 hours. Support tickets sent during weekends or public holidays will be processed next Monday or the next business day. 

    If you like our theme, Please vote it 5 stars. We are really really appreciate your vote :
    To vote go to http://themeforest.net/downloads then follow that link : Here

    Thanks and have a nice day

    Website: http://wpopal.com/ | Follow to Get Our Promotion Themes