Adding headings to your menu in WordPress that don’t go to a page

If you’re creating a complex menu in WordPress, you may have come across this problem. WordPress, by default, only wants clickable links in its menu. Sometimes, though, you want a header that exists simply to let people access 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 look at the way to do it simply, and then we’ll look at some more advanced tweaks to improve the usability of the menu after doing so.

First off, the simple way to add the menu header:

  • Go to Appearance -> Menus
  • In the left sidebar of that page, click “Custom Link”
  • Set the URL to be “#” and the title to be the heading you would like to be displayed.
  • Nest the subpages you want under that heading.

That’s it! That’s the basic version of it. The heading will be there and, if clicked, won’t do anything.

Alright, now for the somewhat more advanced (but not really) version. The problem here, from a usability standpoint, is that when a user 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 you’re the type that this would drive bonkers (hello, that’s me!) there’s a way to get around it.

You’ll need to add some CSS to your site:

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

That’s it, in its simplest form. The CSS selects all links that have “#” as the target and removes the pointer-event (the clickable link) and sets the cursor to be normal (not the hand). 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.

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.

Leave a Comment