Need help? Check out our Support site, then


Changing Menu Bar Color on Adventure Theme

  1. I am trying to change the color of the menu bar but do not have an option within "color theme" within the "customize" section. I see that I can use CSS but do not know how to proceed.

    Thank you in advance for your help!

    The blog I need help with is losfelizarts.wordpress.com.

  2. Hi there, The following CSS can be pasted in at Appearance > Customize > CSS and then you can edit the color codes for the menu as desired.

    The full-width color at the top, where the menu is, would be set with the following:

    #header, #navigation {
        background-color: #FFFFFF;
    }

    A transparent black is set for the hover colors on the main top level and submenu items so they take on a slightly darker grey cast when you hover. The first rule below sets the main top level menu items and the second sets the submenu items. In the rgba declaration, the first three numbers are the RGB color values and the last (0.04) is the opacity. 1 would be completely black, and the closer to 0 you get, the more transparent the color.

    .menu a:focus, .menu a:hover, .menu a:active {
        background: rgba(0, 0, 0, 0.04);
    }
    
    .menu li li a:focus, .menu li li a:hover, .menu li li a:active {
        background: rgba(0, 0, 0, 0.04);
    }

    The main background color for the submenu items (not hovered) would be set here (rgba(0, 0, 0, 0) would be completely transparent.

    .menu li li a {
        background: rgba(0, 0, 0, 0);
    }

    Any of the above rgba colors can be set using standard hex color codes by replacing the rgba(0, 0, 0, 0) with the hex color code you desire such as this:

    .menu li li a {
        background: #CC0000;
    }

    Using RGB colors can be a little confusing at first, so please feel free to give us the colors you want to use and we can help with the exact code for you.

Topic Closed

This topic has been closed to new replies.

About this Topic