How to Make a Non Clickable Menu Item in WordPress
In this tutorial, I’ll show you How to Make a Non Clickable Menu Item in WordPress. By default, when you add pages, posts or custom links to your WordPress menu, they will be a link. But what if you want to have a menu item that just displays the items below it that isn’t an actual link? This tutorial will show you just that. It’s a quick, simple, easy solution and is something that many of my clients have requested on projects in the past.
There’s only 3 steps:
- Go to your menu under Appearance > Menu
- Go to the Custom Link option and add an option with the display title and something in the URL field (I usually add a # symbol)
Remember you can’t add a menu item with no link in the URL to the menu in WordPress.
- Then, just delete the symbol in the URL field.
That’s it! Now you have a non clickable menu item on your WordPress menu. As I mention in the video, it’s not something you’ll do all the time, but I’ve had plenty of situations in the past where clients have asked to make a menu item more of an anchor to show the options below without it being an actual page or link to click on and it took me forever to finally figure this one out. So I’m happy to share the solution with you 🙂
Good tute for those that aren’t aware of this trick.
Great tutorial, Josh. I never knew about deleting the “#” after adding the custom URL to the menu. Thank you!
Glad it helped! Yeah I found that out randomly and it’s been a great solution for me.
To add to this, you can also change the mouse cursor so users can better understand it isn’t a clickable link:
1) In your APPEARANCE > MENUS, make sure you go to “Screen Options” (top right hand of your screen). Make sure “CSS Classes” is checked.
2) Where it says CSS Classes (Optional), add a class, no dots, just the class. Something like, “unclickable” – again, no quotations.
3) Wherever you put your own custom CSS, add this:
.unclickable > a:hover { cursor: default !important; }If you want a different mouse cursor, simply go here and find the one you want. You’ll see examples on the “Try It Yourself” https://www.w3schools.com/cssref/pr_class_cursor.asp
Hope that helps!
Great solution! Yeah usually it defaults the cursor so that it doesn’t show the hand (like shown in the example site) but for some reason mine still showed the the hand in the tutorial site. Maybe it was cached or something. Appreciate the additional solution!
For #2 in my above comment, I forgot to mention that you put the CSS Class in the Custom Link. Sorry for the oversight.
Thank you for this tut. I wasn’t aware that this could be done, so I just popped into one of my customer’s site and removed the # symbol. Without adding the extra CSS the mouse does not show the “hand” when hovering the menu item. So your solution works perfectly as is!
Great to hear! Thanks for letting me know 🙂
Very simple tutorial but very informative ? nice one again Josh.