How can I change the background color of the drop-down menu?

  • Author
    Posts
  • #1038879

    skyblueguy
    Member

    I changed the background color of the sub-menu.
    But I could not change the background color of the main drop-down menu even if I tried some suggestions found in Internet.

    How can I change the background color of the drop-down menu?

    The blog I need help with is mygodchristahnsahnghong.com.

    #1038985

    zandyring
    Staff

    You’ll need to make this modification:

    .sub-menu {
        background-color: #000000 !important;
    }

    If you want the color to be something other than black, use a different hex code. Otherwise, you can just use this as shown. The color is currently set with an “important” declaration, so you will need one in your CSS to overwrite it.

    Good luck!
    -Z

    #1038991

    skyblueguy
    Member

    Thanks for your kind answer.

    I already added the script you suggested.
    But it changes the background color the sub menus only, not the background color of the main menus. (So yo will notice that the background color of the main menus and that of the sub-menus are different.)

    Thanks again for your help.

    #1039074

    I read your original question as how to change the submenu (or drop-down) background color just like zandyring did. Sounds lik you really meant to ask how to change the background color of the main menu.

    Here’s how to change the background color of the main menu of the Sight theme:

    .main-navigation {
    	background: beige;
    }

    Here’s how to change the hover color of the main menu and submenu items:

    .main-navigation ul li:hover {
    	background: green;
    }

    Change the color names to color codes of your choice:
    http://automattic.github.com/Iris/

    #1039077

    skyblueguy
    Member

    It worked as I expected.
    Really thanks for your help.

    #1039078

    Cheers :)

The topic ‘How can I change the background color of the drop-down menu?’ is closed to new replies.