How to Add Titles in a WordPress Menu without Linking to a Page

WordPress has a seemingly limitless variety of customization choices to your web site. Nevertheless, determining how to apply a few of them is probably not instantly apparent. One refined instance is including a title in your menu without linking to a web page.

Happily, this course of might be fast and straightforward. By adjusting a few choices and including some CSS to your website, you may incorporate titles into your WordPress menu without including hyperlinks to go along with them.

On this tutorial, I’ll cowl a few of the the reason why you may want to add an unclickable title to your WordPress menu, then I’ll take you thru three easy steps to set one up. Let’s go!

Menus are largely about making your website straightforward to navigate. Including a title without a hyperlink could seem counterproductive, however it may be a useful organizational instrument that permits your customers to shortly discover the knowledge they want.

A serious utility of that is utilizing an unlinked menu merchandise to categorize sub-items that do have hyperlinks. For instance, right here’s a father or mother title named Contact Us that doesn’t hyperlink anyplace:

As a substitute, Contact Us acts as a father or mother merchandise for the useful youngster objects the place customers can attain out by way of e mail, telephone, or by dropping into a brick-and-mortar location. This fashion, guests can bounce proper to their most popular contact technique as an alternative of clicking on a hyperlink to a contact web page and scrolling via all of the choices.

Unlinked menu titles will also be useful in the event you’re wanting to show a static message persistently throughout your website. Regardless that this technique will get the job accomplished, you is likely to be higher served by including customized header or footer code if that is your aim.

Including titles to a WordPress menu without linking to a web page might be a refined {and professional} contact. Happily, it’s a simple course of. As soon as you already know the steps, you’ll have the option to shortly add unlinked menu titles wherever you want them.

The very first thing you’ll want to do is create or edit the menu you’d like to add an unlinked title to.

You can begin by navigating to Look > Menus in your WordPress dashboard sidebar. It will convey you to the next display screen:

From right here, your present menu ought to already be on the display screen when you have one. If you’d like to begin from scratch, click on on create a new menu as an alternative.

Step 2: Add a Customized Hyperlink

Now that you just’ve chosen the menu you’re going to work on, you can begin creating your unlinked menu title.

Navigate to the Add menu objects panel on the left facet of the display screen and open the Customized Hyperlinks tab to increase the choices:

It will show two fields: URL and Hyperlink Textual content. To make the hyperlink unclickable, merely enter # into the URL field.

Then, sort your unlinked title into the Hyperlink Textual content discipline. On this instance, I’ve opted to use the Contact Us label.

If you’re accomplished, click on on Add to Menu. You’ll be able to add sub-items with hyperlinks beneath this title in the event you’d like, and drag and drop menu objects to prepare them.

Step 3: Use CSS to Stop the Cursor from Altering on Hover

The primary two steps helped you make a menu merchandise that doesn’t hyperlink to a web page. Nevertheless, customers who hover over it is going to nonetheless see their cursors change as if they’ll click on on it. Because it received’t lead anyplace, you may want to change the cursor for consistency’s sake.

Happily, this may simply be accomplished with a little little bit of CSS.

Within the Menus display screen, navigate to the upper-right nook and click on the Display screen Choices dropdown. It will current you with a few choices. Discover the one labeled CSS Lessons:

Verify this field and shut the Display screen Choices menu.

Then, scroll again down to your web site’s menu. Find the title you made earlier that doesn’t have a hyperlink.

There ought to now be a further discipline beneath it labeled CSS Lessons (optionally available).

Enter a customized CSS class to correspond with the cursor change (the CSS code will probably be added subsequent). I’ve used unclickable right here to preserve it easy:

After you’ve settled on a class, save your settings.

Then, open the WordPress Customizer by navigating to Look > Customise in the sidebar menu.

When you’re there, navigate to the Further CSS tab on the backside of the menu on the left. Copy and paste the next code:

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

The one exception right here is in the event you used a class apart from unclickable earlier. In the event you did, simply change that line with no matter identify you gave the CSS class.

Your CSS discipline ought to then look one thing like this:

The change needs to be mirrored as quickly as you’ve entered the extra CSS.

Verify that your cursor doesn’t provide the possibility to click on whenever you’re hovering over your unlinked menu merchandise. When you’re completely satisfied that the modifications you’ve made have been carried out, click on on Publish to save the settings.

After you’ve accomplished these steps, you must have added a title to your menu without linking it to a web page or making it seem clickable in any respect.

Conclusion

Determining how to add a title to your WordPress menu without linking it to a web page might be a bit complicated at first. Happily, with a little little bit of steering, you may navigate the method with ease.

On this article, I coated three easy steps to add an unlinked title to your WordPress menu:

1. Create or choose the menu you’d like to use
2. Add a new Customized Hyperlink menu merchandise
3. Apply a few traces of CSS to make the cursor default to a pointer on hover

What unlinked menu possibility will you create with this tutorial? Tell us in the feedback part beneath!