• Closed
  • D
    Spectator
    June 19, 2014 at 12:53 am #8488

    Hi,
    I need to change the background color of the main menu when mouse hovers on it and also let it stay on that color while it is the active page selected. I had a look at other solutions in the forums but it does not seem to work for me. This is what I found on one of the posts:

    Quote:
    #nav ul a:hover, #sticky-nav ul a:hover, #nav ul .current_page_item a, #nav ul .current-menu-item a, #nav ul > .current-menu-parent a, #nav li.current-menu-ancestor a, #sticky-nav ul .current_page_item a, #sticky-nav ul .current-menu-item a, #sticky-nav ul > .current-menu-parent a, #sticky-nav li.current-menu-ancestor a,#wrapper #nav ul li ul li a:hover, #wrapper #nav ul li ul li.current-menu-item > a, #wrapper #sticky-nav ul li ul li a:hover, #wrapper #sticky-nav ul li ul li.current-menu-item > a, #header-sticky .cart-content a:hover, #header .cart-content a:hover, #small-nav .cart-content a:hover {
    background: red!important;
    }

    I also found this solution:

    Quote:
    ul.nav-menu ul li a:hover {background:red;}

    But that is only for the submenu. I wanted it to be done on both the main menu and sub menu. You can have a look at the website new.hearingconsultants.co.nz

    Roman
    Spectator
    Posts: 3147
    June 19, 2014 at 9:20 am #10057

    use this Custom CSS:

    Code:
    ul.nav-menu li.current-menu-item:before, ul.nav-menu li.current-menu-ancestor:before,ul.nav-menu li.current-menu-ancestor li.current-menu-item a, ul.nav-menu li.current-menu-ancestor li.current-menu-parent a,ul.nav-menu li.current-menu-item, ul.nav-menu li.current-menu-ancestor, ul.nav-menu li:hover {background:white;}
    D
    Spectator
    Posts: 15
    June 20, 2014 at 1:07 am #10058

    Thanks Roman. It worked, however, it did not replace the dark grey color for the current page (please see image). I want the current page menu and when mouse hovers on menu to have the same color.

    Untitled_zps615d91f6.png

    Roman
    Spectator
    Posts: 3147
    June 20, 2014 at 9:34 am #10062

    put there !important mark

    Code:
    ul.nav-menu li.current-menu-item:before, ul.nav-menu li.current-menu-ancestor:before,ul.nav-menu li.current-menu-ancestor li.current-menu-item a, ul.nav-menu li.current-menu-ancestor li.current-menu-parent a,ul.nav-menu li.current-menu-item, ul.nav-menu li.current-menu-ancestor, ul.nav-menu li:hover {background:white!important;}
    D
    Spectator
    Posts: 15
    June 22, 2014 at 10:59 pm #10077

    Thanks! Working now.