Need help? Check out our Support site, then


Change Menu color

  1. Hello--I have three questions:

    How can I change the background of the menu bar to match the blue background of my blog?

    At the same time, I'd like to center and also change the menu tab labels to the color white...as it appears on this blog: http://elainemnelson.com/contact/

    Finally, I need help making the site title and descriptions to be the color black.

    Thank you so much for your assistance!

    The blog I need help with is westernwomenshistory.org.

  2. Update: I changed the background color of the blog to taupe.

    I'd like to still change the background of the menu bar/site navigation...to match the color of the blog, with the text showing up as black (not white as earlier requested).

    Sorry for the changes, but thanks for your help--

  3. How can I change the background of the menu bar to match the blue background of my blog?

    To change the background color of the main menu in the Twenty Twelve theme, add the following to your Appearance > Customize > CSS editor:

    .main-navigation {
    	background: #b6aeae;
    }
    
    .nav-menu > ul {
    	padding-left: 40px;
    }

    The left padding is because the menu bar sits inside the main content container in this theme and so it looks funny if you change the background color without adding extra spacing to the beginning of it. you can adjust the 40px value as needed.

  4. At the same time, I'd like to center and also change the menu tab labels to the color white

    This example will change the menu and submenu link and background colors for the menu items as well as their hover states:

    .main-navigation a:hover,
    .main-navigation a:focus {
            color: #fff;
    }
    
    .main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
            border-bottom: 1px solid #ededed;
            border-top: 1px solid #ededed;
    }
    .main-navigation li a {
            color: #eee;
    }
    .main-navigation li a:hover,
    .main-navigation li a:focus {
            color: #fff;
    }
    .main-navigation li ul li a {
            background: #b6aeae;
            border-bottom: 1px solid #b6aeae;
    }
    .main-navigation li ul li a:hover,
    .main-navigation li ul li a:focus {
            background: #6a5c5b;
            color: #eee;
    }
    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-ancestor > a,
    .main-navigation .current_page_item > a,
    .main-navigation .current_page_ancestor > a {
            color: #fff;
            font-weight: bold;
    }

    Adjust the color codes as needed.

    ...as it appears on this blog: http://elainemnelson.com/contact/

    Just for reference, I noticed the blog you linked to http://elainemnelson.com/contact/ is using the Twenty Eleven theme. If you like that theme better, you might try previewing it in your Appearance > Themes page to see if it's a better starting point for you. It might not be though :) personally, I'm a huge fan of Twenty Twelve! but I just noticed you pointing out how you liked elements of the Twenty Eleven theme.

  5. Can i use the same code above for highlighting hover state menu items for the chalkboard theme?

    I would like to do this for all the submenu items too.

  6. Sorry - i forgot to include my blog link http://musicampto.wordpress.com/

  7. Can i use the same code above for highlighting hover state menu items for the chalkboard theme?

    You can't! CSS is theme-specific.

    Since your question is about a different theme, please start a new thread at http://en.forums.wordpress.com/forum/css-customization/#postform and make sure to include a link to the page you're working on and a good description of what you're trying to change.

  8. designsimply---thank you so much! This was very, very helpful!

Topic Closed

This topic has been closed to new replies.

About this Topic