[Resolved] Can I give 2nd level sub-menu its own colorscheme by using CSS

Home Forums Support [Resolved] Can I give 2nd level sub-menu its own colorscheme by using CSS

Home Forums Support Can I give 2nd level sub-menu its own colorscheme by using CSS

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #842447
    Michael Andersen

    Hi,

    This is the CSS I use to format my 1st level Sub Menu:

    
    /*** SUB-MENU ***/
    /* Submenu */
    .main-navigation .main-nav ul ul li a {
    	background-color: #d5d5d5 !important;
    	color: #333 !important;
    }
    /* Submenu - hover */
    .main-navigation .main-nav ul ul li:hover > a {
    	background-color: #666 !important;
    	color: #f5f5f5 !important;
    }
    /* Submenu - current */
    .main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
    	background-color: #999 !important;
    	color: #f5f5f5 !important;
    }
    

    Can I by using CSS create a equivalent colorscheme for 2nd level sub menu?

    See graphic.
    Sub Menu

    GeneratePress 2.2.2
    GP Premium 1.7.8
    #842683
    Leo
    Staff
    Customer Support

    Hi there,

    The submenu colors are actually in the customizer so no CSS needed:
    https://www.screencast.com/t/SgykkVNR

    And you definitely don’t want to add !important to every single piece of CSS either.

    For the third level menu item, try this CSS:

    .main-navigation .main-nav ul ul ul li a {
        background-color: #fff;
        color: #000;
    }
    #843738
    Michael Andersen

    Hi,

    Thank you for your quick response. The CSS code worked fine.

    And thanks for the tip regarding !important. I removed it and the remaining code still works.

    /Michael

    #843744
    Leo
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.