Changing Color Main Menu (Sub-Categories)

  • Author
    Posts
  • #138720

    Hello,

    I see in the forum the CSS to change the entire background of the main navigation, but I’m interested in only changing part of it. On one of my menu items, it drops down and then it pops out to subcategories. I’m wanting to change this second pop out color.

    For example, my site has Products > Slings > list of different types of sling – I want the lists to have a slightly different background shade than the rest of the navigation.

    Is there CSS I could use for this?

    Thank you!

    The blog I need help with is ashleyrigging.com.

    #138724

    tarasdashkevych
    Theme Author

    Hello,

    Please use this custom CSS to change colors of the sub-menus:

    
    .main-navigation ul ul {
      background: #09c;
      border-color: #000;
    }
    
    .main-navigation ul ul li a,
    .main-navigation ul > li > ul:before {
      border-bottom-color: #000;
    }
    
    .main-navigation ul ul a {
      color: #ffffff;
    }
    

    Hope this helps. Let me know if you have any other questions.

    Thanks,
    Taras

    #138739

    Hi Tara,

    This code is changing the color of the entire dropdown menu. I’m only wanting the second tier of the drop down menu color to change (I’m trying to make it slightly darker shade of grey to help differentiate it a little more).

    Thanks,
    Julianne

    #138760

    tarasdashkevych
    Theme Author

    Julianne,

    Please try this custom CSS. It should only change a background color of the second level menu in the primary menu section:

    
    .main-navigation ul li > ul{
      background: #e5e5e5;
    }
    
    .main-navigation ul li > ul ul {
      background: #ffffff;
    }
    

    Thank you,
    Taras

    #138767

    That worked! Thank you

    #138769

    tarasdashkevych
    Theme Author

    Not a problem! I am glad was able to help :)

The topic ‘Changing Color Main Menu (Sub-Categories)’ is closed to new replies.