WordPress.com Forums » Topic: Twenty Twelve menu css

uberdish on "Twenty Twelve menu css"

uberdish — Wed, 03 Oct 2012 16:04:46 +0000

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

designsimply on "Twenty Twelve menu css"

designsimply — Mon, 01 Oct 2012 00:03:38 +0000

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 on "Twenty Twelve menu css"

uberdish — Fri, 28 Sep 2012 20:39:57 +0000

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.