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? Commented Apr 6, 2012 at 22:50
  • what do you mean? Commented Apr 6, 2012 at 22:52
  • I need to create a drop down like here - bit.ly/okHDHb (look under Services) Commented Apr 6, 2012 at 22:54
  • I see, so those items act like headers for a group of menu items Commented 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. Commented 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? Commented Apr 6, 2012 at 23:13
  • Is it possible it gets overriden by ul ul li class? Commented 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. Commented 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? Commented Apr 6, 2012 at 23:37
  • could be.. try #top-menu ul li.gh a{color:red;} Commented 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 Commented Apr 6, 2012 at 23:20
  • anyway, where should I add your filter, in what file? Commented Apr 6, 2012 at 23:24

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.