0

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!

Improve this question
5
  • Why use CMs for this?
    – onetrickpony
    Apr 6, 2012 at 22:50
  • what do you mean?
    – Acidon
    Apr 6, 2012 at 22:52
  • I need to create a drop down like here - bit.ly/okHDHb (look under Services)
    – Acidon
    Apr 6, 2012 at 22:54
  • I see, so those items act like headers for a group of menu items
    – onetrickpony
    Apr 6, 2012 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, 2012 at 22:59

2 Answers 2

Reset to default
1

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.

Improve this answer
7
  • 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, 2012 at 23:13
  • Is it possible it gets overriden by ul ul li class?
    – Acidon
    Apr 6, 2012 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, 2012 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, 2012 at 23:37
  • could be.. try #top-menu ul li.gh a{color:red;}
    – onetrickpony
    Apr 6, 2012 at 23:44
0

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

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

  if(empty($item->url))
    $classes[] = 'your-header-class';

  return $classes;

}, 10, 3);

But you should go with keatch's solution :)

Improve this answer
2
  • 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, 2012 at 23:20
  • anyway, where should I add your filter, in what file?
    – Acidon
    Apr 6, 2012 at 23:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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