Need help? Check out our Support site, then

Twenty Twelve menu css

  1. I'm trying to target the navigation css in order to change the colour of the text and flyout background colour in the Twenty Twelve theme using this:

    .main-navigation a {

    .main-navigation a:hover {

    This changes absolutely nothing (in other themes I would have seen a change). Any guidance you can provide would be most appreciated. Many thanks.

    The blog I need help with is

  2. Not all themes are the same. :)

    I've found that the best way to change out colors for specific things is to start by looking at the theme's original stylesheet. Here is the one for Twenty Twelve (look for anything that references ".main-navigation"):

    Here is some example CSS to get you started:

    #masthead .main-navigation ul.nav-menu,
    #masthead .main-navigation div.nav-menu > ul {
    	border-bottom: 1px solid lightgreen;
    	border-top: 1px solid lightgreen;
    #masthead .main-navigation li ul li a {
    	background: lightgreen;
    #masthead .main-navigation a {
    	color: green;
    #masthead .main-navigation li ul li a:hover {
    	background: bisque;
    #masthead .main-navigation a:hover {
    	color: darkred;
    #masthead .main-navigation ul.nav-menu,
    #masthead .main-navigation div.nav-menu > ul,
    #masthead .main-navigation li ul li a {
    	border-color: rgba( darkred, 0.1 );

    Change the color names to color codes of your choice:

  3. Many thanks for this, it's exactly what I was looking for.

Topic Closed

This topic has been closed to new replies.

About this Topic