How to Make a Menu Link Unclickable in WordPress

This post may contain affiliate links, which means I will receive compensation if you click through and make a purchase.

How to make a menu link unclickable in WordPress | Ever wonder how to make a link in your WordPress blog's menu unclickable? In this post I'm sharing a step-by-step tutorial on how you can add a menu item that's not a link. Click for instructions.

Have you ever wanted to add some text your your WordPress menu without it being a link? There are plenty of times when this could come in handy. For example, maybe you don’t want the top tier of a drop down menu to be clickable. Or maybe you’d like to add a label to your menu for some reason (much like my blog menu above).

Whatever the reason may be, adding an unclickable link to your WordPress menu is incredibly easy.

First, go to your menu via Appearance > Menus. Now you’re going to add a custom link (which can be found by clicking on Custom Links on the left side of the page, below the Pages section).

In the URL field, delete the http:// and replace it with #. Then in the Link Text field, give the link a name and click Add to Menu.

unclickable links tutorial

Drag and drop it to your desired location and then click the little arrow on the right side of the menu item to open it up. We’re looking for the CSS Classes box, which may or may not be there.

unclickable links tutorial

If it isn’t, scroll to the top of the menu page and find Screen Options. With options expanded, check off CSS Classes. If you scroll down to your menu items, you should now see the CSS Classes box.

unclickable links tutorial

Once you’ve found the CSS Classes box, add unclickable to the box. Then click Save Menu.

Sidenote: If you’ve already added the menu item in the past and you want to make it unclickable, you’re going to have to delete the item from your menu and add it via a custom link, as outlined above. If the menu item is already a custom link, then you can go ahead and just change the URL to # and add unclickable to the CSS Classes box.

Once your unclickable link has been added to your menu, check it out. You’ll notice that clicking on it does nothing except change the URL in your browser’s address bar (http://yourdomain.com/#). Your link is essentially unclickable.

Now you’re welcome to just stop here if you want. Your link is unclickable, which was the goal of this post. But we’re going to take it a step further to provide your blog readers with an even better user experience.

You may have noticed that when you hovered over your unclickable link, your cursor changed to a pointer and the color of the text changed as well. This is because the menu item is still technically a link, even if it leads to nowhere. So we’re going to conceal the link so that it reads just as any other text on your site would.

In order to do this, you’ll need to pull up your site’s stylesheet (by going to Appearance > Editor) or editing your theme’s custom CSS (usually located under Appearance, but depending on your theme, it may be located under theme settings or elsewhere).

Before we can add any styles to that menu item, we first have to figure out what class is being used for our menu. If you’re using the Genesis Framework (affiliate link), you’ll want to use .genesis-nav-menu or .nav-primary (or .nav-secondary). Other themes may use classes such as .main-navigation, etc. To find out which class your menu is using, you can use a tool such as Firebug or use Inspect Element.

Once you know your menu’s class, add the following to your theme’s stylesheet or custom CSS page:

.genesis-nav-menu .unclickable a:hover {
     color: #000; //use the same color as your menu links
     cursor: default;
}

Note: Make sure to replace .genesis-nav-menu with your menu’s class.

In the above code, you’ve told your theme that any link with a class of .unclickable should have a hover state listed above. Because we added unclickable to the menu item’s class field earlier in this tutorial, the above code will apply only to that menu item (or items). That way, the rest of your menu links behave normally and only those with a class of unclickable will receive special treatment.

And that’s it! The menu item you wanted to be unclickable now acts as if it is ordinary text. No one will know that it is technically still a link.

Need some development help?

50 thoughts on “How to Make a Menu Link Unclickable in WordPress”

  1. This is a really great tip, Allyssa. I’ll be sure to keep it in mind coz I’m currently editing a lot of things on my blog. Just recently migrated from Blogger to WordPress. Yay! 🙂

  2. Thank you so much for this, Alyssa! I was reading your blog looking for something totally unrelated and saw this post, something that I was struggling to figure out a few days ago for a new blog design I’m working on. Seems like it should be so obvious and simple, and it is simple once you know what to do, but still not obvious 😉 Thanks again. xx

  3. I followed your instructions and created the .unclickable class. So the top tier menu items to which I assigned the .unclickable class have the default cursor as they should, however the sub menu items to which I did not assign the class also show the default cursor when they should be showing the pointer cursor as they are clickable. I could create another class for the sub menu items, however it seems like there should be a more elegant solution… After all I could end up with lots of sub menus and it would be tedious to assign a class to each… Please advise. Thank you!

    1. Hi Jill. You’ll want to add this to your CSS as well:

      .genesis-nav-menu .unclickable li a:hover {
           cursor: pointer;
      }
      

      That should set all sub-menu items back to the normal link cursor 🙂

  4. You are the best! I had been looking through wordpress help and nothing made sense. This post is so much more helpful, thank you!

  5. Pingback: Making Menu Items Unclickable – Franklin Regional Adult School

  6. Alyssa, thanks for the helpful post. One question:
    I tried adding that command to my stylesheet and changed it to .main-navigation (which seems to be my site’s class). But it didn’t seem to work. I’m wondering, am I supposed to paste that command into a specific section of the stylesheet?

        1. You’d want to use #menu-header-navigation .unclickable a:hover and that should work. Although it looks like a bunch of your top level menu items are already setup that way ( about us, education, support).

          1. Ahh I see – I need the sub-menu to be changed to the ‘cursor’. For example, under ‘Connect’ when you hover over Social Media it is unclickable but still shows the hand instead of pointer. Is there a different code I need to add? Thank you so much for your reply!

          2. Oh, okay. You’ll want to add #menu-item-5809 a:hover { cursor: default; } to your stylesheet. This triggers that link only and should work 🙂

  7. Thanks Alyssa – This helped a lot , we cannot find this on WordPress documentation. Many many many Thanks.. You Rock!!

  8. Thanks, Allyssa.. It’s annoying that WordPress makes what should be a simple task so difficult…but thanks to your great explanation I’ve been able to get it to work. Thank you.

  9. Thank you for this. So many WP articles are just plain unnecessarily complicated. Yours was so easy to follow.

    On my site I have created a link using the above method and I see the ‘#’ appended in the URL when I click on the unclickable link. Is there a way to not show the ‘#’ in the URL even if I click on said link?

    1. Here is a helpful link:
      http://docs.themeisle.com/article/145-how-to-make-parent-menu-unclickable-using-themeisle-themes
      I use this method on all of my websites.
      If you want to make parent menu unclickable, just follow the process:
      Navigate to Appearance > Menus, in your WordPress Dashboard, and create a custom links.
      On the custom links add the pages with the links that you want.
      The trick is that it won’t let you create any menu tab without a link, so you have to give it a random link, add it to the custom menu, and once you added it edit it and delete the URL.
      That should make your menu tab unclickable like you want it.
      Hope this helps.

  10. Hey!

    Great post, really easy to follow – thank you. 🙂 However I have tried everything but my link is still clickable! I was wondering whether you would have any suggestions?

    Thanks 🙂

    1. I’m guessing it’s not targeting the correct link class. Sometimes it takes a bit of trial and error to figure out exactly what to target. What link on your site are you trying to get it to work on?

      1. Hey, thanks for your reply. 🙂 I’m trying to get it to work on ‘countries’ and ‘destinations’.

        I don’t know whether it would have something to do with the fact that when I went into appearances > menus, the breakdown of my menus wasn’t already set up as I had set up my menus as pages (I hope that makes sense?!). I had never been into appearances > menus before. I then created the Custom Link (Countries) and selected the pages I wanted underneath from the left hand side.

        1. Okay, on the edit menu page, when you click on either countries or destinations, you may or may not see a field to enter a custom class. If you don’t see it, click on screen options (top right part of the page, kind of below your name in the top bar). You’ll want to make sure that the custom class box is checked. Once you do that, you’ll see a class box appear. Under destinations and countries, you’ll want to enter unclickable in that box. Then use the CSS code in this post, but change .genesis-nav-menu .unclickable a:hover to .navigation .unclickable a:hover and that should work! 🙂

  11. Hi Allyssa,

    Thank you for the information. Your directions were very clear and helped me out tremendously with a site i was working on. I’m looking forward to utilizing your services for future inquiries.

  12. Hi, love your post! But I got lost half way through. How do I find out what class in my menu using? Any keywords I should look for? Mine is a Azalea theme. I haven’t made my site public yet so I am not able to direct you to it. Thank you a bunch!

    1. If it’s the free Azalea theme, it looks like you would use #primarymenu instead of .genesis-nav-menu in the code specified. If not, you’ll want to look for the ul that holds the li elements of your menu. There might be more than one class specified for the ul, but any would work.

  13. This is great, thank you for this. I’m doing this in divi…is this correct (to your knowledge):

    .top-nav-menu .unclickable a:hover {
    color: #000000; cursor: default;
    }

  14. Thank you very much Allyssa 🙂
    I was looking all over for a solution to this, and came across your site here 🙂
    Have a great one!

    1. I’m not familiar enough with WordPress.com, but I’m guessing you wouldn’t have access to the class field in the menu and the CSS editor in order to get it to work on the free version.

  15. sivadasan a. madhavan

    None of these options are available if your website is hosted by wordpress itself. I see nothing like any of these on the customization tab.

  16. Hi Allyssal. I use the Tower theme and I can not understand how to cancel the cursor on the item dedicated only to the opening of the submenu: I created the class as you suggested, in the name entered in the menu item, but does not change anything. I tried replacing the name of the class but maybe it’s wrong. The site is under development
    http://www.palestradellascrittura.it:8181/
    the only real voice with link is the last, CONTACTS, while all the other first entries, do not have links, only serve to open the submenu and I would not have the cursor with the hand for the links, but they had the default cursor (no hand).

    Would you be so kind to suggest how to solve?

    .menu-item-2853 .unclickable to: hover {
          color: # 000! important ;;
          cursor: default! important;
    }

    At the moment, I use
    /* PRIMARY MENU */
    /* Cursor default = NO LINK */
    .unclickable a:hover {
    color: #656565 !important;
    cursor: default;
    }
    /* Cursor point = YES LINK */
    .clickable a:hover {
    color: red !important;
    cursor: pointer;
    }

    and I assign it to every single item in the menu options. Honestly, as a method is it ok or you would have, in fact, other suggestions?

    Thank you very much for your patience and your time. Best regards. Bruno

  17. Pingback: My Homepage

Comments are closed.