If you’ve ever wanted a top-level navigation item to act as a trigger for a drop down menu, but not actually link anywhere, here’s how to do it in the WordPress 3.0 menu system:
- Insert a custom link with a label and any link address
- Click on Edit Menu Item link (triangle)
- Delete link address in URL field
- Add nested sub-menu items
- Save
12 Comments
Just spent an hour searching for the answer to this and apart from using JavaScript I couldn\’t get a result.
Then I saw your solution and it was exactly what I needed.
Great stuff – Thank you!
Mike 🙂
Awesome! Thanks for sharing. I\’ve been using # to trigger drop downs, but this solution is much nicer.
Glad to have been a help to you both. Check back now and again, I\’ll try to keep posting these tips as I come across them in my development.
I was using the Disable Parent Menu Link plugin — will try this simple method, as the fewer conflict possibilities the better.
I use this same technique to just apply section breaks in a list for a nav menu and just encountered a problem after upgrading to WP 3.3. Seems that without anything as an href wp ignores any css I have targeting the custom link. Any ideas? Have you experienced this at all? What I\’m actually having a problem with is that any items I have as sub items of the custom menu item with empty url are displaying the current page class from the top level menu item above.
Dustin, do you have a link that I could see this in action?
Here\’s a link. http://www.eacpds.com/
Currently I just commented out the current-menu-item class. The area which I \’m referring to is the blue nav area on the left. The white links should be a dark gray when they are the current page, but like I said that is commented out now so they just stay white.
Dustin, checking the source code, it seems like it should be working correctly. The top level parent link has a class of
current-menu-ancestorandcurrent-menu-parent, and the submenu item has these classes:current-menu-itemandcurrent_page_item.I do notice now that the parent list item is wrapped in an anchor like this: <a>Software</a> – which may be something new in 3.3, I\’m not sure. You may need to add another class to your CSS like this:
li.current-menu-ancestor li.current-menu-item a { color: #ccc }
Doesn\’t work anymore on WordPress 4.1. Any other hint?
Hi Mike – I just tested it and it\’s still working for me… what kind of error are you getting?
brilliant. excellent. awesome. this helped me a lot. thanks.
Many Thanks !