Changing a menu link to become a text item

Removing the link from a menu item.

Sometimes we want a link not to be a link but just be a text item.
An example can be a top link with sub menu items. We want the top link to house the sub menu items which contains various information. Leaving the top link to contain no information and not be clickable.

Go to Appearance -> Menus.

Add a Custom Link.
URL: # and a link text. Here is an example.

Top link not in use WordPress menu
Top link not in use – WordPress menu.

I next added a few sub pages.

Top link not in use in WordPress menu. Top part with a below sub menu.
Top link not in use in WordPress menu. Top part with a below sub menu.

The sub menu items are clickable and contain various information. The top link is just not in use.

Go to the frontend of the site. Notice the cursor still changes when hovering the top link. We need to change the cursor CSS to not give a signal that this is a link.

Right click the menu and notice the CSS class menu-item-2101 as seen in the HTML area.

Inspect Elements in Browser to locate HTML and CSS
Inspect Elements in Browser to locate HTML and CSS.

Add the CSS code

Add CSS to Customize -> Additional CSS section, the child theme style.css or a code snippet plugin.
Code for telling the cursor not to change on hover, and an example where only the link turned text also changes background color.

.menu-item-2101 a:hover {
        cursor: default; /* Will not change the cursor on hover. */
        background: red; /* Example with adding a color. */	
}

Because the “Top link not in use” fake link has a submenu we need to add code so that the submenu items show the regular pointer on hover.

.menu-item-2101 .sub-menu a:hover {
        cursor: pointer; /* Brings back the cursor to show that these are links. */
        background: none; /* Removes the background color. */
}

That is it.

Inspiration for this article came from a friend Azaris as well as the following article https://www.organizedthemes.com/add-text-to-navigation-menus/

Share the article:

Leave a Reply

Your email address will not be published.

1 + six =