Twenty Twelve menu css

• 

  uberdish · Member · Sep 28, 2012 at 8:39 pm

  • Copy link
  • Add topic to favorites

  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 {
  color:#45602D;
  }

  .main-navigation a:hover {
  color:#cbe86b;
  }

  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: (visible only to logged in users)

• 

  designsimply · Member · Oct 1, 2012 at 12:03 am

  • Copy link

  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”):

  https://s1.wp.com/wp-content/themes/pub/twentytwelve/style.css?m=1348774451g&minify=false

  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:
  http://automattic.github.com/Iris/

• 

  uberdish · Member · Oct 3, 2012 at 4:04 pm

  • Copy link

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