WordPress has a seemingly endless number of customization options for your website. However, figuring out how to apply some of them may not be immediately obvious. One subtle example is adding a title in your menu without linking to a page.
Fortunately, this process can be quick and easy. By adjusting a few options and adding some CSS to your site, you can incorporate titles into your WordPress menu without adding links to go with them.
In this tutorial, I’ll cover some of the reasons why you might want to add an unclickable title to your WordPress menu, then I’ll take you through three simple steps to set one up. Let’s go!
Why Add a Title in a WordPress Menu without Linking to a Page
Menus are mostly about making your site easy to navigate. Adding a title without a link may seem counterproductive, but it can be a helpful organizational tool that enables your users to quickly find the information they need.
A major application of this is using an unlinked menu item to categorize sub-items that do have links. For example, here’s a parent title named Contact Us that doesn’t link anywhere:
Instead, Contact Us acts as a parent item for the functional child items where users can reach out via email, phone, or by dropping into a brick-and-mortar location. This way, visitors can jump right to their preferred contact method instead of clicking on a link to a contact page and scrolling through all the options.
Unlinked menu titles can also be helpful if you’re looking to display a static message consistently across your site. Even though this method will get the job done, you might be better served by adding custom header or footer code if this is your goal.
How to Add Titles in a Menu without Linking to a Page (in 3 Steps)
Adding titles to a WordPress menu without linking to a page can be a subtle and professional touch. Fortunately, it’s an easy process. Once you know the steps, you’ll be able to quickly add unlinked menu titles wherever you need them.
Step 1: Select or Create a Menu
The first thing you’ll need to do is create or edit the menu you’d like to add an unlinked title to.
You can start by navigating to Appearance > Menus in your WordPress dashboard sidebar. This will bring you to the following screen:
From here, your current menu should already be on the screen if you have one. If you want to start from scratch, click on create a new menu instead.
Step 2: Add a Custom Link
Now that you’ve selected the menu you’re going to work on, you can start creating your unlinked menu title.
Navigate to the Add menu items panel on the left side of the screen and open the Custom Links tab to expand the options:
This will display two fields: URL and Link Text. To make the link unclickable, simply enter # into the URL box.
Then, type your unlinked title into the Link Text field. In this example, I’ve opted to use the Contact Us label.
When you’re done, click on Add to Menu. You can add sub-items with links underneath this title if you’d like, and drag and drop menu items to arrange them.
Step 3: Use CSS to Prevent the Cursor from Changing on Hover
The first two steps helped you make a menu item that doesn’t link to a page. However, users who hover over it will still see their cursors change as if they can click on it. As it won’t lead anywhere, you might want to change the cursor for consistency’s sake.
Fortunately, this can easily be done with a little bit of CSS.
In the Menus screen, navigate to the upper-right corner and click the Screen Options dropdown. This will present you with a few options. Find the one labeled CSS Classes:
Check this box and close the Screen Options menu.
Then, scroll back down to your website’s menu. Locate the title you made earlier that doesn’t have a link.
There should now be an additional field underneath it labeled CSS Classes (optional).
Enter a custom CSS class to correspond with the cursor change (the CSS code will be added next). I’ve used unclickable here to keep it simple:
After you’ve settled on a class, save your settings.
Then, open the WordPress Customizer by navigating to Appearance > Customize in the sidebar menu.
Once you’re there, navigate to the Additional CSS tab at the bottom of the menu on the left. Copy and paste the following code:
.unclickable > a {
pointer-events: none;
}The only exception here is if you used a class other than unclickable earlier. If you did, just replace that line with whatever name you gave the CSS class.
Your CSS field should then look something like this:
The change should be reflected as soon as you’ve entered the additional CSS.
Check that your cursor doesn’t give you the option to click when you’re hovering over your unlinked menu item. Once you’re happy that the changes you’ve made have been implemented, click on Publish to save the settings.
After you’ve completed these steps, you should have added a title to your menu without linking it to a page or making it appear clickable at all.
Conclusion
Figuring out how to add a title to your WordPress menu without linking it to a page can be a bit confusing at first. Fortunately, with a little bit of guidance, you can navigate the process with ease.
In this article, I covered three simple steps to add an unlinked title to your WordPress menu:
- Create or select the menu you’d like to use
- Add a new Custom Link menu item
- Apply a few lines of CSS to make the cursor default to a pointer on hover
What unlinked menu option will you create with this tutorial? Let us know in the comments section below!
