Disable WordPress Parent Menu Link

Broken chain link

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:

  1. Insert a custom link with a label and any link address
  2. Click on Edit Menu Item link (triangle)
  3. Delete link address in URL field
  4. Add nested sub-menu items
  5. Save

12 thoughts on “Disable WordPress Parent Menu Link

  1. 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 🙂

  2. I was using the Disable Parent Menu Link plugin — will try this simple method, as the fewer conflict possibilities the better.

  3. 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.

      1. 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.

      2. Dustin, checking the source code, it seems like it should be working correctly. The top level parent link has a class of current-menu-ancestor and current-menu-parent, and the submenu item has these classes: current-menu-item and current_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 }

Leave a Reply

Your email address will not be published. Required fields are marked *

Ready for a refreshing experience on your next website design?