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.
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.
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.
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.
Make sure CSS Classes box is checked off, and then close the Screen Options section.
Next, click on the unlinked menu item, and add a class named “unclickable.”
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;
}