Get Qi Theme with 150 superbly designed WordPress demos

Get Qi Theme
Qi Theme
Sign up for our newsletter and be the first to get all the latest Qode news and updates.
BACK TO TOP

How to Create WordPress Menu Items Without a Link

How to Create WordPress Menu Items Without a Link

WordPress is a platform that is suitable for everyone, including people with absolutely zero coding knowledge. Pair this CMS with the right WordPress theme, and you can create virtually any kind of website imaginable.

There are some elements that all websites have in common, regardless of the niche. For example, in order to ensure users can find their way around with ease, every website needs to have a good navigation menu. And if you run a multi-layered website with a lot of content, in that case you need to create a mega menu to enable effective user navigation. A well-structured menu is an absolute must because it allows users to swiftly find and access parts of a website they’re interested in.

When adding menu items to your menu in WordPress, by default, every item needs to have a link and take the user somewhere upon a click. Of course, there are instances when the link is not needed, when it’s superfluous.

For example, we may want to display a menu item that will simply open the sub-items in the dropdown and not actually link to anything itself. These items are called “no-link” or “dead” menu items, and, unlike “regular” menu items, they are not clickable.

It’s time we learned how to create WordPress menu items without a link.

Creating a Menu Item Without a Link

In your admin dashboard, go to Appearance > Menus.

Menu Settings

Under Add menu items, click on Custom Links. If you don’t see this option, scroll to the top of the page and in the upper right corner look for Screen Options.

Menu Screen Options

Click on it, look for the Custom Links, and check this box.

Menu Custom Links

Let’s go now to Custom Links. This option will appear in the Add menu items section. In the URL field enter a hashtag (#). In the Link Text field enter the name of the menu item you’re about to create.

Add menu custom link

When you finish, press the Add to Menu button. Once you save the changes the new menu item will appear within the menu structure on the right.

You can now click on the menu item to open its options. If you leave the ‘#’ sign in the URL field, the new menu item will appear as if it were linked, but, upon clicking on it, users will go back to the top of the page they’re currently browsing. If you delete the hashtag and leave the field empty, the page they’re browsing will refresh when they click on the menu item.

URL field

Luckily, there’s a simple solution to this as well.

Qode Themes: Top Picks
Bridge New Banner
Bridge

Creative Multi-Purpose WordPress Theme

Stockholm WordPress Theme
Stockholm

A Genuinely Multi-Concept Theme

Startit WordPress Theme
Startit

Fresh Startup Business Theme

How to Make Menu Items Unclickable

To make it clear that a menu item is unlinked, you can also make the mouse cursor display as the default icon when a user hovers over that menu item. If you’re using one of Qode Interactive’s premium WordPress themes, you can do this by simply checking the Don’t link box.

Make it clear that a menu item is unlinked

This will not only show the default cursor upon hover, but will also make the menu item unclickable (i.e. if a user clicks on the menu item, nothing will happen).

In case you are not using one of our themes, you can keep the default cursor on hover and make the link unclickable via some simple CSS. In Appearance > Menus click on Screen Options at the top of the page and make sure the CSS Classes box is checked.

Check CSS Classes

Next, go to the menu item you’ve previously unlinked and look for the CSS Classes option. Write unclickable in that field and then click Save Menu.

Unclickable Option

Now that you have created the class, add the following code to your CSS:

.unclickable > a {
pointer-events: none;
}

And that’s all there is to it. Users now won’t be able to click on any menu item with the unclickable class.

Premium Qi Theme
Banner theme content

…and That’s a Wrap!

We’ve come to the end of our tutorial on how to create WordPress menu items without a link, and we’ve also showed you how to make your pointer on hover disappear. As you make modifications in your admin dashboard and in CSS, don’t forget to save all the changes you make along the way. And remember, clear navigation is a very important component of a good UX. Your visitors should be able to seamlessly go from one page to the next, so plan your menu structure well, but also feel free to experiment with the look of the menu. Explore the possibilities of hidden menus or fullscreen navigation, but always make sure that your website is understandable and easy to use.

Post your comment

Comments0