• Home
  • Knowledge
  • Manuals
  • Video Tutorials
    • Adore Church WP
    • AutoStars WP
    • BornToGive WP
    • Gaea WP
    • Native Church WP
    • Eventer
  • Open a Ticket
  • Need Customisation?
  • Home
  • Knowledge
  • Manuals
  • Video Tutorials
    • Adore Church WP
    • AutoStars WP
    • BornToGive WP
    • Gaea WP
    • Native Church WP
    • Eventer
  • Open a Ticket
  • Need Customisation?
home/Knowledge Base/How To's/Make menu item unclickable
Popular Search:Theme installation via WordPress, Translate the theme

Make menu item unclickable

106 views 3 January 9, 2020 admin

Want to add an unclickable menu item to your menu?

In this post, you’ll learn the two quick steps required to make a menu item not linked.

Making a menu item unclickable

First, login to your site and navigate to the Menus page.

In the Menus page, click on the Custom Links section on the left.

Screenshot of the menus page

The Custom Links option lets you link to any URL you want, but we’ve got a special trick instead.

In the URL input, replace “http://” with a pound sign “#,” and enter whatever text you want for the Link Text.

Adding a custom link

Click the Add to Menu button, and then you can arrange the new item in your menu. Since the menu item isn’t linked anywhere, visitors won’t be taken to a new page if they click it.

The URL field cannot be empty and using a pound sign this way is a standard convention.

Remove the pointer on hover

The menu item doesn’t link anywhere, but it still shows the “pointer” cursor when you hover over it. There’s one more step you can take to make it obvious this menu item isn’t clickable.

In the Menus page, click the Screen Options tab at the top-right.

Screen Options button

Make sure CSS Classes box is checked off, and then close the Screen Options section.

CSS classes checkbox

Next, click on the unlinked menu item, and add a class named “unclickable.”

Adding the CSS class

With the CSS class added, we can now target that specific menu item with CSS.

The following CSS will make the cursor stay as the default icon when hovering over the unlinked menu item.

.unclickable > a:hover {
  cursor: default;
}
Tags:menuWP MenuLinks

Was this helpful?

3 Yes  1 No
Related Articles
  • Set up WordPress FTP Credentials within wp-config.php
  • Generate Envato Token
  • Make Flexslider images responsive
  • Add Widgets in the Megamenu
  • Use Mega Menu
  • Start using SiteOrigins Page Builder
Leave A Comment Cancel reply

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

How To's
  • Make menu item unclickable
  • Set up WordPress FTP Credentials within wp-config.php
  • Generate Envato Token
  • Make Flexslider images responsive
  • Add Widgets in the Megamenu
  • Use Mega Menu
View All 22  
Popular Articles
  • Translate theme
  • Speed up your website
  • Add custom fonts to your website
  • Add Animated GIF images in WordPress
  • Returning to classic editor after new WordPress 5.0 update
KB Categories
  • Getting Started
  • How To's
  • Ticket System
  • General Issues
  • FAQs
  • Quick Solutions
  • Support Policy
  • Privacy Policy
  • © 2020 imithemes. All Rights Reserved.

Popular Search:Theme installation via WordPress, Translate the theme