WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I need to change the color of some custom link elements in dropdown of my wordpress custom menu here. There 3 items in my dropdown that dont have any url associated with them:

  • Air Duct
  • Chimney
  • Dryer Vent

They will be just the headers for other dropdown items below them.

I need to be able to change their attributes such color, font-family and size, etc.

I was trying to create menu-item-type-custom and menu-item-object-custom and even menu-item-#### classes, but it didn't do it... :( Please help!

share|improve this question
Why use CMs for this? – onetrickpony Apr 6 '12 at 22:50
what do you mean? – Acidon Apr 6 '12 at 22:52
I need to create a drop down like here - bit.ly/okHDHb (look under Services) – Acidon Apr 6 '12 at 22:54
I see, so those items act like headers for a group of menu items – onetrickpony Apr 6 '12 at 22:55
yes exactly. What is the best way to achieve this? I need to be ablo to style just those headers. – Acidon Apr 6 '12 at 22:59
up vote 1 down vote accepted

Enable the CSS Classes (Screen Setting -> Flag CSS Classes) and use it to customize every menu item that you want to be styled in a different manner.

You must use a Custom menu, of course.

share|improve this answer
I've created class "gh" : .gh {color: red;} .gh A:link {text-decoration: none; color:red;} .gh A:visited {text-decoration: none; color:red;} .gh A:active {text-decoration: none; color:red;} .gh A:hover {text-decoration: none; color: red;} , But for some reason it still showing regular dropdown style. Is there any special css that I have to use for that class? – Acidon Apr 6 '12 at 23:13
Is it possible it gets overriden by ul ul li class? – Acidon Apr 6 '12 at 23:26
The class is applied to list items, so use it like li.gh a{color:red;} and so on. Some pseudo classes may not taken into consideration because the item is an anchor. – onetrickpony Apr 6 '12 at 23:28
Right now I have this in my style.css : .gh {color: red;} .gh a{color:red;} .gh a:hover {color:red;} . I can see with my developer tools that the style applied to the item, however still no change in appearance.. I see there are some other class applied as well, maybe they override gh class? – Acidon Apr 6 '12 at 23:37
could be.. try #top-menu ul li.gh a{color:red;} – onetrickpony Apr 6 '12 at 23:44

Another way, using a filter if you want to do this programmatically:

add_filter('nav_menu_css_class', function($classes, $item, $args){

    $classes[] = 'your-header-class';

  return $classes;

}, 10, 3);

But you should go with keatch's solution :)

share|improve this answer
yeah, I was just reading about wp_nav_menu_items hook before I started this thread.. You're right, I really hope to make the custom menu css classes to work – Acidon Apr 6 '12 at 23:20
anyway, where should I add your filter, in what file? – Acidon Apr 6 '12 at 23:24

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.