• Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

Easy Web Design Tutorials

WordPress Tutorials and more

  • Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

10 January - 2015 By Paal Joachim 1 Comment
Last updated on: October 31, 2018

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).

WordPress menu

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.

 

Simple Custom CSS WordPress Plugin

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/

 

Share this:

  • Email

Categories: How to, WordPress

Paal Joachim Romdahl

I enjoy teaching and creating tutorials. As well creating web sites.
I help people gain WordPress knowledge through my easy to follow tutorials and specialized training. Contact me for more information on how I can improve your WordPress skills and to help get your web site quickly up and running.

Comments

  1. Raul Maguiñ says

    12 April - 2018

    Great tutorial. How could I give this text a different color than the rest items of the menu

    Reply

Leave a Comment Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2021 · By Easy Web Design Tutorials · Built on the Genesis Framework · WordPress · Log in · ⇪

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.