How-To: Unclickable Links

Recently, someone asked me if I could do a tutorial on how to make menu links unclickable. You may or may not have noticed that four of my menu links on my site (Chapters, Summaries, Characters, and Thank You) are not clickable. This is because there was no reason to have a page there since all of the information being sought is in the drop down menu when you hover on those menu titles.

So, how did I do this? Here are the steps I took:

First, I went to my dashboard and opened my menus. (Dashboard –> Appearance –> Menus)

Then, I opened my primary menu for the site which I have labeled “Menu 1.” Yours might have a different label.
As you can see, instead of adding a page that I created to my menu, I added a custom link which I labeled “Chapters.”

Here is what “Chapters” looks like when opened. You will see that instead of putting a url address in, I put a “#.” This is what makes the link unclickable; because it doesn’t take you anywhere.
In the CSS Classes, I put “unclickable.” (This step is optional and only useful if you have upgraded your account to premium.)
I also did this for my Summaries, Characters, and Thank You custom links because I didn’t want those to be clickable either.

Next, I saved the menu.
Those links should now be unclickable. And you are done! 🙂 If you have upgraded to a premium account, you can add CSS coding in order to change the colors and hover colors on your menu to make the unclickable page blend in better. (This is my favorite place to find the hex codes for the colors I use: ColorHexa.)
Thanks for reading and I hope this helps and that you find it useful. If there is another particular thing I’ve done with my blog that you would like to learn, please don’t hesitate to contact me.