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!
I was looking for a way to do this, and your solution worked. Thank you for sharing.
that’s amazing, thank you
Thanks Chris…. Just the missing piece I need 🙂
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.
It’s not working for me tho. Is there any other options to make the link in the menu unclickable?
mmm it should work as shown. I’m not sure of another method…
For me it’s working on the desktop page but not on the mobile page.
You know any solution for this?
It wasn’t working for me too. I realized I had to have a display location checked off. So if you scroll to the bottom of the Menus page, where it reads Menu Settings, you have to have a display location set for the menu to be unclickable. Josh has it set to his Primary menu in the video.
Not sure if you figured this out, but I hope you did. 🙂
And thanks Josh!! The tutorial was helpful.
I recently tried this method but my site does not have appearance available. Nothing I look at resembles your steps at all. So I am curious if your method is for the free portion of the site or paid. If that even matters at all too
This is just based off of a standard WordPress install so as long as you’re using WordPress, you should see appearance > menus.
Thanks for sharing this information about how to make a non clickable menu item in WordPress it’s very amazing and very helpful for me. keep it up. thank you very much:)
There is also another css-code that works. It seems to be nearly the same.
I found it here: https://wordpress.org/support/topic/not-to-show-hand-on-non-clickable-menu-item/
.mega-disable-link > a.mega-menu-link {
cursor: default !important;
}
Thanks!
I have followed your advice for making an unclickable menu item. I don’t understand why it’s not working for me.
Great article, i added a custom link in my menu, its working perfect for a laptop with mouse cursor sub-menus shows, but when I open in a smartphone, the responsive menu cant open the sub-menus, when I touch on custom link menu.. whats the solution
Waiting
-Michael Norman
Hi Josh. Thanks for the great tip. I’ve just implemented on my WordPress site.
Thank you!! So nice to have a workaround that didn’t involve *only* CSS editing–just a simple, easy-to-understand solution for us non-techies. Much appreciated 🙂
Thank you! This was just what I was looking for.
Hey bro! You rock! Thanks for this tutorial. Very simple to follow.
This was EXACTLY what I needed! Thank you so much! Worked perfectly!!!
That worked just fine. Now I want the sub custom menu link to open in a new window. I go to screen options > Show advanced menu properties > Link Target selected, but Link Target is not visible in screen options. I am running on WP 5.6 using a Divi theme.
thanks!
I tried this but it still link to the homepage to me
Thanks Much! Just applied this to a plumbing site that I am working on and it worked perfectly. Had no idea the ‘#’ can be removed.
WHAAAAAAA…. I was pulling all my hairs out of my head! This is what I wanted. Thank you so very much for sharing this with us. Deep bow of respect
Life-saver!!! Thanks so much!!
Straight and to the point. Nice.
This solution is not accessible.
The menu item must be .
The better option is to leave the hash and add script with preventDefault, to avoid “jump” (Little scroll) when the user click on the item.
Your comment is awaiting moderation.
This solution is not accessible.
The menu item must be real link.
The better option is to leave the hash and add script with preventDefault, to avoid “jump” (Little scroll) when the user click on the item.