How to Make a Menu Item Not Clickable in WordPress

Is your blog ready for a new theme?

Download any of our themes now for FREE.

View Themes

Want to add an unclickable menu item to your menu?

In this post, you’ll learn the two quick steps required to make a menu item not linked, and a bonus tip for improving the user experience.

Making a menu item unclickable

First, login to your site and navigate to the Menus page.

In the Menus page, click on the Custom Links section on the left.

Screenshot of the menus page

The Custom Links option lets you link to any URL you want, but we’ve got a special trick instead.

In the URL input, replace “http://” with a pound sign “#,” and enter whatever text you want for the Link Text.

Adding a custom link

Click the Add to Menu button, and then you can arrange the new item in your menu. Since the menu item isn’t linked anywhere, visitors won’t be taken to a new page if they click it.

The URL field cannot be empty and using a pound sign this way is a standard convention.

Remove the pointer on hover

The menu item doesn’t link anywhere, but it still shows the “pointer” cursor when you hover over it. There’s one more step you can take to make it obvious this menu item isn’t clickable.

In the Menus page, click the Screen Options tab at the top-right.

Screen Options button

Make sure CSS Classes box is checked off, and then close the Screen Options section.

CSS classes checkbox

Next, click on the unlinked menu item, and add a class named “unclickable.”

Adding the CSS class

With the CSS class added, we can now target that specific menu item with CSS.

The following CSS will make the cursor stay as the default icon when hovering over the unlinked menu item.

.unclickable > a:hover {
  cursor: default;
}

If you’ve never added CSS to your site before, follow this guide on adding CSS. It only takes a minute or two.

Menu items unlinked

Most WordPress webmasters will use this to make the parent menu item unclickable in a drop-down menu. While it’s a great technique for that, you can make any number of menu items unclickable, and they don’t have to be top-level menu links either.

Do you have any questions about this tutorial or a tip for other readers? Leave a comment below.

2 Comments
  1. This was helpful. Thank you!

  2. Thanks, easily explained, I was done in seconds! 🙂

Post a comment

Your email address will not be published. Required fields are marked *