Removing the link from a menu item
Go to Appearance -> Menus.
Top right: Click the Screen Options tab beside the Help tab.
Inside the Screen Options: Click to checkmark the Links and CSS Classes box.
Below left: Select the Links tab and in the URL box remove the https:// and type #. Then add a name in the Link Text box. Then click Add to Menu. Move the new menu item to where you want it.
Inside the new menu item in the CSS Classes (optional) box: Give a CSS class name to the menu item. Since I called my menu item WordPress I called mine wpmenu-nolink. We will use this name in a moment.
(Remember to click Save Menu after making adjustments).
By adding CSS directly to a theme the CSS might be overwritten the next time you update your theme. Either create a child theme or install the Simple Custom CSS plugin or use the Jetpack plugin (Jetpack contains many plugin features). The Simple Custom CSS plugin will add a separate area inside the Appearance -> Custom CSS to where you can safely add CSS edits.
Below is a screenshot from the Simple Custom CSS plugin. Which I installed for this occasion.
If your using the plugin then go to Appearance -> Custom CSS. If your using a child theme then go to your child theme style.css file.
The code I added (which will only affect the one link):
.wpmenu-nolink a:hover { background: none; cursor: default; }
a:hover = moving (hovering) the mouse over the active (button).
background: none. Since the background changes on hover for my menu it will not do so with this code.
On hover the cursor changes on regular buttons but will not do so when we tell it to stay at the default type.
Check your web site. You should now have a single menu item that acts just like regular text.
NB!
If you are changing a link which is part of a submenu (or at the top of the submenu) then we need to add some additional CSS code.
.wp-nolink .sub-menu a:hover { cursor: pointer; }
NB2!
Here is another example code:
li#menu-item-4832 a:hover { cursor: default !important; } li#menu-item-4832 .sub-menu a:hover { cursor: pointer !important; }
For the cursor to change back into a hand/pointer for the rest of the submenu we need to use the above code in addition to the code we added earlier.
Inspiration for this article came from a friend Azaris as well as the following article https://www.organizedthemes.com/add-text-to-navigation-menus/
Great tutorial. How could I give this text a different color than the rest items of the menu