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!

  • Why use CMs for this? 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 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

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.

  • 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. 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;} 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 :)

  • 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 clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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