Creating a sub-menu, or multi-level menu, in WordPress is actually pretty easy! WordPress has a guide to creating multi-level menus perfectly well explained in their documentation, roughly half-way down the general guide to creating menus.

So why do we have a post all about something WordPress has already covered? Well… if you’re creating a sub-menu in WordPress, you may have come across a problem: WordPress, by default, only wants clickable links in its menu. Sometimes, though, you want a top level menu item that exists simply to provide your website visitors with access to sub-pages below it. It’s a relatively easy task to do, but how to do it definitely isn’t made clear!

We’re going to show you how to make this happen, and then we’ll look at some more advanced tweaks to improve the usability of the menu after doing so.

How to add an unlinked submenu label in WordPress

  • In the WordPress admin, go to Appearance > Menus
  • In the left sidebar of that page, click “Custom Link”
  • Set the URL to simply: #
  • Set the title to be the heading you would like to be displayed.
  • Now add the actual pages (sub-pages) you want to appear under this heading and drag and drop them into place, nestling them underneath the menu item you just added.

That’s it! That’s the basic version of it. The menu will be there with its submenu options and when you click on it, it won’t take you to another page.

How to make it look and behave less like a link

And now for the somewhat more advanced (but not really) addition.

The problem that remains, from a usability standpoint, is that when a website visitor hovers over the link it still very much “feels” like you should be able to click it. It’s got the cursor for a link, it acts like a link, it’s just pointing somewhere that doesn’t go anywhere. This is probably fine, but if this drives you bonkers (hello, that’s me!) there’s a way to get around it.

You’ll need to add some CSS to your site. Go to Appearance > Customizer and open up the Custom CSS section and paste this in there, then save your changes:

a[href="#"] {
   pointer-events: none;
   cursor: default;
}

This CSS says: all links that have “#” as the target URL are to no longer be clickable (pointer-events: none;) and sets the cursor to not be the hand (cursor: default;).

You’ve now got a header in your menu which doesn’t go anywhere, can have sub-elements under it, and doesn’t hurt my head from a usability standpoint.


Does your web host help you with WordPress?

No? Perhaps it’s time for a change. Check out our high performance Canadian WordPress Hosting!

About Allen Pooley

Allen is a self professed geek and technology lover. He's always playing with one of his various websites, and loves helping customers with theirs. He can often be found with a coffee (light roast, please) in his hand and a smile on his face... or with a plate of bacon. Mmm, bacon.

3 Comments

  1. Shirley on June 9, 2019 at 8:20 pm

    Thank you very much for this! Couldn’t have figured this out on my own.

    • Jordan Schelew on June 23, 2019 at 8:57 pm

      Hey Shirley! Glad we could help 🙂 If you’re ever in the market for super-fast web hosting, we’d love to have you host with us!

  2. John Bilash on February 10, 2019 at 1:55 pm

    Just want to say thank you for this. I was trying to figure out this very issue. I so often get tired of searching through multiple “help” resources that just seem to use the same or similar words that everyone else does when they explain things. Most references I looked through completely ignored the fact that the “standard explanation” means you end up with links to pages that are meaningless… when all you want is the text heading. I was figuring I must be wrong, since no one mentioned it… and I must be missing something.

Leave a Comment