Custom menus in WordPress give you a lot of control over the arrangement of your menus. One issue that comes up every once in a while is how to include a word that is not a link, a page, or a category. In other words, how can you include a word that describes the child items in a drop-down menu.

The solution is to use a custom link, and then edit it to remove the link. If you need to know what a custom menu is, what it does, or how to set one up, be sure to read my original custom menu tutorial.

Create a Custom Link

custom_menu_18In your “Menus” page, look for the “Custom Links” area. It looks like this:

custom_menu_19For “URL” add whatever you like, provided it looks like a real URL. In other words, there’s a `http://` part and it ends in “.com”, “.net” or something similar. We’ll remove this later.

For “Label” enter the name that you would like to have appear in your menu. For this example, we’ll use “Services.”

Click the “Add to Menu” button.

Delete the URL

Now look to the right at your menu. You should see your custom link there:

custom_menu_20

See that little triangle to the right? Click on it to open the item:

custom_menu_21

That URL is what we’re going to get rid of. Select it and then hit the “Delete” key.

custom_menu_22

That’s much better. Don’t forget to save your menu:

custom_menu_23

Once that’s done, navigate back to your site and make sure everything looks good.

custom_menu_24

 

If that menu item isn’t exactly where you want it, read my earlier custom menu tutorial to figure out how to position it.

Edit the CSS to Eliminate Hover

Unfortunately, WordPress still thinks that link goes somewhere. Depending on the theme you are using, that item may exhibit a different appearance if you hover over it:

custom_menu_25

 

You will need to add some custom CSS to your child theme to eliminate that. But first, you’ll need to know the unique ID for that menu item. You can use either your browser’s “View Source” function or Firebug, which is quicker. In this case, Firebug’s results look like this:

custom_menu_26

 

This menu item has a unique ID of `menu-item-1767` So adding something like this:

li#menu-item-1767 a:hover {
    color:#fff;
}

to our child theme style sheet should keep that menu item white when we hover over it. However, each theme codes menus differently, so you’ll need to understand how your theme puts menus together and styles them in order for this to work. The code above works for Graphene, the theme I use on multiple blogs.

The unique ID for each item is a WordPress function, however. If you want to have ultimate power over styling individual posts, pages, and other items, you can learn more about that here.

Questions? Ideas? Feel free to add a comment down below.