WordPress 3.0 Menus CSS


For those of us not using Thesis theme (hello? Anyone?) you might have come across the new Menus features when you upgraded your WordPress to version 3.0.

I’ve held off changing the menu system over from using the defaul Hybrid theme menu out of fear. I tentatively checked what it would look like and it seemed that there would be some nasty CSS changes which I’d need an hour or so to do.

Well today I finally found that hour and I’ve updated my menu to use WordPress 3.0’s menu system. It’s really not all that hard, here’s the CSS I used:

#primary-menu {
	padding-left: 35px;
	color: #000000;
	background: #ffffff;
	margin-top: 120px;
	margin-bottom: 0;
	height: 30px;
}
 
#primary-menu li {
	margin-right: 1px;
	background: #bbbbbb;
}
 
#primary-menu li:hover a:hover {
	background: #2DC30B;
	text-decoration: none;
	color: #ffffff;
}
 
#primary-menu li.current-menu-item a {
	background: #585858;
	color: #ffffff;
}
 
#primary-menu li.current-menu-item:hover a:hover {
	background: #585858;
}
 
#primary-menu li a,  li.menu-item a {
	background: #bbbbbb;
	color: #000000;
	font-family: Verdana;
	font-size: 10pt;
	font-weight: bold;
	border: none;
 
}

Feel free to steal this CSS and use on your own website!

Easy Menu Management

And now that I’ve got my menu sorted to work with WordPress 3.0, it’s really easy to administer the menu using the inbuilt system as you can see below:

My Menu in WordPress 3.0 with sub menus

Took me a minute to figure out how to create submenus, it’s quite simple really. Just drag your menu item to the right a little underneath the menu item you want it to appear.

I highly recommend switching over to the core menu system, it make managing your menus a breeze.

Josh Kohlbach

Josh is a software entrepreneur from Brisbane, Australia. He spends most of his time helping e-commerce store owners. This is his personal blog where he shares his thoughts and other tidbits on online business and life in general.

This Post Has 6 Comments

  1. Great code! I’ve been looking to get into customizing CSS/Wordpress menus like this, but it helps to have a starting point.

  2. One question, maybe a bit noobish but where can I add my css code for the menu? I just setup child-parent tree structure of my pages, if I put it on the sidebar as widget it shows but I want to apply my css over there. how do I do this?

    1. Hi Akerman, generally the CSS code will go into your styles.css file located in your theme’s directory. If you want to apply it to a sidebar menu you’ll need to find the name of those elements and address them directly, it will probably change if you’re using a sidebar menu widget.

      It probably helps if you’ve got a bit of an understanding on how to use CSS, I’d recommend here for a good tutorial.

  3. Hi Josh, Thanks for the fast reply, I started playing around after i posted the comment and selected ‘inspect elements’ in opera on my site, and found the name of the menu. So now I have an efficient menu without javascript 🙂 only thing is: for some reason it moved all the way to the bottom, so now I’m going to search how to fix that :p

    1. No problems, glad to hear you’re having some success with it! Good to see you have the inquisitive attitude of a programmer 😉

Leave a Reply

Close Menu