Sometimes you just need a bit of text next to your navigation menu. Here’s a quick way to add it.
First, go to the navigation builder (Appearance > Menu). In the left hand column, find the “Custom Links” section. We’re going to create a custom link. For the URL, remove the http://
and replace it with a #
. In the label field, enter the text you’d like to display. When you’re finished, click “Add to Menu.” That will add the text you’d like to display to your menu.
Next in the right hand column, you should see your next text. Drag it to the location where you’d like it to appear, most likely at the top or bottom of your menu. Voila, you’ve just added text to your navigation menu.
The only problem is it will behave just like a link, even though it doesn’t go anywhere. We can change that though. In the top right hand corner of the navigation builder is a tab that says “Screen Options.” Click it and make sure the box next to “CSS Classes” is checked. Now click on your next custom text again. In the box for “CSS Classes (optional), enter this:
no-hover
Update your menu and we can tweak this just a bit more. If your theme has a spot where you can enter Custom CSS paste this. If not, you can use the CSS editor that’s in the Jetpack plugin, or just add it to your style.css file. Here’s the snippet that will make your text behave like plain old text instead of a link:
.no-hover a:hover { background: transparent; cursor: default; }
You may also need to add in a color if your navigation menu item’s text color changes on hover. Update your CSS and you’re done.
So that’s a quick and easy way to add custom text next to your navigation without much fuss.
Jacks Turner December 11, 2019
Hi Bill
Thanks this worked for me apart from the hover link still changes colour.
Fernando September 23, 2018
Hey Bill.
First of all, thank you very much for your instructions, I followed everything and it seems that works perfectly. What I would like to do now is adding the font size for this text. I have tried to add font-size and font-weight, but it only changes on hover, what could I do?
My website: http://www.makeyoureurotrip.com
Ramsey September 26, 2018
Hi Fernando,
You would have to add a CSS Class in Appearance > Menus to your custom menu link (if you don’t see that option, on the Menus page, click Screen Options at the top right to enable that option). Then, you can work with that CSS class in your child theme or in the customizer (Appearance > Customize > Additional CSS).
Does that work?
Adi Covitz February 9, 2017
Hi,
Could you help me too? Here is the website http://www.pashutsafot.com/
Where it says 05XX-XXX-XXX on the menu bar, I want it not to look like another tab and to move it more to the left so that it is separate from the other tabs.
Thank you
Jasmin August 18, 2016
I just want to say thank you for this simple but great css code. I tried so many ways to get this done and then finally, I found your post by google and it worked… thanks a lot Bill!
Bill Robbins August 18, 2016
Glad to hear that helped out Jasmin 🙂
Marek August 9, 2016
Hi Bill,
I tried using your fix, but it does not work in my case.
I created a custom menu item which I want to function as a label only, so I deleted the URL from that item, but it still shows a different color on mouse-over as if it was a link.
You can see it here: http://sg.terrybraunstein.com/events-news/ and the item is the ‘Written About Braunstein’s:’ in the menu below the logo.
How do I disable the hover effect from that item?
Thanks for any help.
Bill Robbins August 9, 2016
Hi Marek,
Good question. It looks like the mega menu modifies the class that is added to it changing no-hover to mega-no-hover. To me that sounds like a odd choice since I would expect the class that is added to the menu to be output as is.
Try changing the code in your child theme to be like this:
and see if that won’t do the trick for you.
Tane June 19, 2016
Weird, I have it working on my test site and went to copy it over to the main site and it doesn’t seem to work at all. I have changed the menu item colors using;
#menu-item-1094 a {
color: #fff;
background-color: #5cb8e7;
}
in the child sheet but the no-hover doesn’t seem to be working which it does on the other site.
Bill Robbins June 19, 2016
You might check to make sure the ID # is the same between the two sites. Very often those are different even between sites that share the same content.
Monica November 4, 2015
Hi Bill! I just found this as I just only now had a need for it! THANK YOU THANK YOU THANK YOU! It worked for me seamlessly!! 🙂
Bill Robbins November 5, 2015
Happy that helped out Monica 🙂
Sergio September 25, 2015
Thanks for your help. But as you said the green underline bounces to the right of the phone number. Do you have any idea if we can change the green color to white only when we hover over the phone number through CSS ??
Bill Robbins September 25, 2015
I don’t know of a way to do that. You might ask the theme’s author if they have a solution for you there. If there is a way hopefully they’ll know.
Sergio September 24, 2015
Thank you very much for the tutorial. It is working for me but the template that i installed uses lava lamp style menu and I can’t seem to figure out how to get rid of the bar that shows when i hover over. It is acting like a menu item. Any ideas how to get rid of the bar? If you need a reference as to what i am speaking about, take a look at my website at consciat.com.
Thanks.
Bill Robbins September 24, 2015
That is a bit trickier since the element that makes up the lava lamp is independent of the actual menu items. The javascript there inserts an additional menu item at the end of the list that’s only purpose is to create the elastic border there.
The quickest option would be to add a background to the no-hover item that matches the header background and then position it above the lava lamp border. You could do that with this CSS:
#primary-menu li.no-hover {
background-color: #fff;
z-index: 20;
}
The downside is a bit of the lava green may show up on the other side of the phone number. You could set the overflow of the navigation menu to be hidden, but that would take out the drop-downs.
marc September 16, 2015
Thanks guys, this page has been very useful.
Especially the..
li:last-of-type {
border: none;
}
to lose the last divider on a horizontal single line menu list
Steve June 23, 2015
Thank you. Just what I needed to add a phone number to every page.
d.b. June 9, 2015
Hello, if you add the link the way you’ve explained you can simply delete everything in the menu url-field. That way the text stays in the menu but you don’t have to fake a disabled link.
Bill Robbins June 9, 2015
Hey d.b. you can leave the URL field blank, but it will still be loaded inside an anchor (a) tag on the front end of the site which makes it a link. The HTML would look like this:
Good thought though.
navneet kumar March 13, 2015
How can I add “-” only before li of sub-menus in a wp-menu.?
like below :-
menu1
menu2
– submenu1
– submenu2
Bill Robbins March 13, 2015
The easiest option is to just edit the menu item labels where you want to have a “-” and add them directly to it. That’s the simplest solution and it requires no editing of the theme.
anka January 4, 2015
I’ve found my mistake – just had put my css class not in the right field! It works fine and I am so happy with it!
Thanks for sharing this!
Scott January 3, 2015
It’s funny, I come from the Joomla side of CMS systems and it allows for non linking text in the menu.
I’ve been looking around for this and I thank you for the solution. I figured it was a CSS fix but was not 100% sure.
Thanks man.
Bill Robbins January 3, 2015
Glad that helped out Scott 🙂
RichardHK October 27, 2014
Hi Bill,
This code works a treat except for one anomaly. As I am using Page/Post menu links indented below the no-hover text Custom Link, the CSS is inherited and all menu items lose color background formatting.
How do I get top-level text item to remain no-hover formatted, but have child menu items have the required clickable pointer and background hover color?
Thanks for your help.
Bill Robbins October 27, 2014
Hey Richard,
Most likely that can be changed. Could you post the URL to the site you’re working on so I can make certain the css fits the theme you’re working with?
Thanks
Mika September 18, 2014
Tried your first suggestion and it worked beautifully so I will not need the code for removing the “bullets” (that are dashes as you pointed out). But thanks anyway for that second solution. I might need it another time (or someone else reading this might have use for it on their webpage/blog). Again thank you SO much for your help!!! Now the base of my webpage is finished and all I need to do is fill it with content.
Mika September 17, 2014
Hi Bill!
Thanks a lot! That worked.
Mika September 17, 2014
Alternatively to changing the font weight on parts of the menu (the posts), I can use a submenu but then I need help removing the bullets in front of the posts in the list (have tried .sub-menu ul {
list-style: none !important;
}
without luck) and to get the text aligned to the parent menu. Any suggestions?
Bill Robbins September 17, 2014
It looks like the “bullet” is actually a dash that’s inserted via CSS. Try this to override it:
Mika September 17, 2014
Hi!
Thanks! I filled in the website info as asked. I am currently working in the maintenance mode but I can remove it temporarily so that you can have a look.
If you, by any chance, also know how I can change the font weight of the posts in the menu (i.e. only the posts, not the links that I am trying to make text items out of). I have tried to specify a code with menu-item-type-post in the custom css but without luck. I am not managing to get the code right.
Bill Robbins September 17, 2014
Thanks Mika, Try adding this custom CSS to the bottom of your style.css file or via any style plugins you’re using:
The first style there changes the font-weight of all the menu items. The second one changes the weight of just the ones we’re removing the hover effects for. The last one changes the color and cursor of those to remove the visible effects.
Mika September 16, 2014
Hi!
Your instructions have been most helpful! The only troublesome thing is that the css code doesn’t seem to work for me. The original code you gave didn’t change the hovering effect on the desired links at all and adding color and !important meant that not only was there no hovering effect on the desired links but on the whole menu (the links to the posts as well). I am using the Moka wordpress theme from Elma studio.
Bill Robbins September 16, 2014
Hello Mika,
There are lots of ways that the existing CSS can be structured for a WordPress navigation menu. It’s likely the sample isn’t specific enough to override what’s already there. If you want to leave the URL to where you’re working in a comment here, I’ll be glad to take a look for you and see if we can find the right code to change it.
Kristin July 17, 2014
Just wanted to say thank you. I was close to getting a solution like this, but threw up my hands and searched for it. Thank you again. Nice.
Bill Robbins July 17, 2014
I’m glad it helped out 🙂
Hugo July 3, 2014
I want to add contact information in the menu,my templete dont have CSS optional.What would be the problem maybe?
Bill Robbins July 3, 2014
There shouldn’t be any trouble. The text you add will look just like a navigation link, but it’ll still be present which is the most important part.
Mujtaba June 12, 2014
Hi Bill,
i have done this but can not make the links unclickable, the address is rebuild.cmatrust.org
Bill Robbins June 12, 2014
Try adding this to the very bottom of your style.css file:
nav.navigation li.no-hover a:hover {
color: #fff !important;
background: transparent;
cursor: default;
}
and see if that won’t remove the hover state for you.
Lakshmi May 30, 2014
Excellent Info Bill…..I have been searching for this info from past 30 days….
Ben April 8, 2014
THANK YOU! Good Stuff.
Bill Robbins April 8, 2014
Anytime 🙂
ben April 8, 2014
http://www.naigchiropractic.com
Bill Robbins April 8, 2014
To keep the text color from changing you would also need this:
You might also consider adding a phone link to that item instead of a
#
so people on a smartphone could click it to call you. There’s a post about that at https://www.organizedthemes.com/adding-phone-number-wordpress-navigation/ .Ben April 8, 2014
I added the code to the custom css section and tho no hover to the menu option, but all that works is the cursor doesn’t change. What can I do to get it not to change background colors?
Bill Robbins April 8, 2014
It could vary a bit from theme to theme. If you want to post a link to where you’re running into trouble, I’d be glad to take a look for you. It may be that you need to change the snippet a bit like this:
Not seeing the site, there’s no way to know for certain.
thinkstudio February 20, 2014
Hi im trying to impliment this on a theme but NO luck… I added the class to my css file, and so on…
Bill Robbins February 20, 2014
If you want to leave a link to the site you’re trying to add it to, I’ll be glad to take a look.
Mark Wright February 17, 2014
Thanks, Bill. REALLY struggling with WordPress formatting… As someone said elsewhere, what takes me 5 minutes in HTML/PHP and CSS is taking 5 days in WordPress!
Mark Wright February 16, 2014
I’ve been searching for this type of information for weeks…thanks!
What I was REALLY looking for was how do you get the separators (“|”) between the links without leaving a trailing “|” after the last link (assuming you do it with CSS)?
Bill Robbins February 16, 2014
Good question Mark. What I typically do is add a border between the menu items, usually a right border. Then for the last one I use something like this:
ul.menu li:last-of-type {
border: none;
}
to remove the border from the last item in the menu. Hope that helps out.
Josh Stauffer December 19, 2012
Now, that’s some creative thinking there, Bill. Also, I always forget about Jetpack. Thanks for the tip.
Bill Robbins December 19, 2012
Necessity is the mother of invention.