By default, WordPress requires a link when adding an item to your website’s menu. But when you create a drop-down menu, you might not want the parent item to be linked to any page – just the sub-menu items.
You can see this on my website as well. If you check out the Services menu item at the top, you’ll see that it’s not linking to any page.
So, how can you do that yourself? Very easily actually, and in this post, I’ll show you how!
Adding a menu item in WordPress without linking to a page
Step 1 – Log in to WordPress and go to Appearance -> Menus.
Step 2 – Select the Custom Links section, add a Link Text (name of the menu item) and the # sign in the URL field.
Step 3 – Press the Add to Menu button.
Step 4 – Open the custom link that you added to the menu and remove the # sign.
Step 5 – Add your sub-menu items and press the Save Menu button.
That’s it!
Now your WordPress menu item will not link to any page.
That’s a wrap
Hope you found the tutorial useful and comprehensive, and you managed to add a menu item without a link attached to it.
Don’t forget to share it to help out others!
If you have any questions or thoughts, drop a comment or send a message via contact or Facebook page.
You can also hit the follow button on Twitter and subscribe to the YouTube channel.
If you want to start your own WordPress blog, or need a website for your business, ThemeSkills’ WordPress installation service is at your disposal! On-going WordPress support and maintenance is on the menu as well!
You can also purchase a ready-made WordPress website with hosting and support included!
Thank you so much for this!!!
You’re welcome! :D
Thank you thank you thank you!
You’re welcome, you’re welcome, you’re welcome! :D
Any simple way to remove the hover cursor on the new destination-less menu item?
I assume you don’t want to completely remove it because it will literally disappear when hovering, which will look weird, like something’s broken. I recommend changing it from a text cursor (the one it appears when hovering over text) to a pointer.
For that, you have to find out your menu item’s CSS selector.
If it’s for this site
meroladesign.com, for the Services menu item, then add this custom CSS into WordPress:#main-menu #menu-item-326{cursor: pointer;}Clear the site and browser cache if you can’t see the change after simply refreshing.
If it still doesn’t change, add
!importantto the code, like this:#main-menu #menu-item-326{cursor: pointer !important;}If you still want to completely remove it, add this code:
#main-menu #menu-item-326{cursor: none;}This doesn’t work in 2019, cause WordPress will autocorrect the URL :( Is there any other way?
It still works. Just tried it now to make sure.
If you say that the URL gets auto-corrected, it means a plugin or theme feature steps in.
Thanks for taking the time to make this quick video and explanation. Sometimes its just the odd little things like this that stump you in the middle of a website build. Great good!
Thanks! I’m glad you found the post helpful!
Thanks so much! I love it when things work straight away after step-by-step instructions!
I’m happy to see it worked smoothly for you! :D
Super useful, thank you! :)
Thanks!
I have tried this multiple times and have had no success. I thought maybe it was because I’m trying to make a previously linked parent menu item unclickable, rather than working with a new page. Any thoughts? I want to make NEWS unclickable so that only the drop-down menus are clickable.
Hi
what is best practice when I use this technique on a mainmenu-items, when having breadcrumbs on your site?
Exactly what I needed! Thanks :)
Thank you so much for the help!