Menu Quick Tip

Add Text To Navigation Menus

Sometimes you just need a bit of text next to your navigation menu. Here’s a quick way to add it.

Custom LinkFirst, 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.

CSS ClassesThe 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:

[html]no-hover[/html]

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:

[css] .no-hover a:hover {
background: transparent;
cursor: default;
}
[/css]

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.

54 Comments

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

Reply

    Ramsey September 26, 2018

    Hi Fernando,

    You would have to add a CSS Class in Appearance Menu to your custom menu link. Then, you can work with that CSS class in your child theme or in the customizer (Appearance > Customize > Additional CSS).

    Does that work?

    Reply

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

Reply

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!

Reply

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.

Reply

    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:

    
    #mega-menu-wrap-new-menu #mega-menu-new-menu > li.mega-menu-item.mega-no-hover > a.mega-menu-link:hover {
        background: none !important;
        cursor: default !important;
        color: inherit;
    }
    

    and see if that won’t do the trick for you.

    Reply

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.

Reply

    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.

    Reply

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!! 🙂

Reply

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 ??

Reply

    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.

    Reply

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.

Reply

    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.

    Reply

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

Reply

Steve June 23, 2015

Thank you. Just what I needed to add a phone number to every page.

Reply

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.

Reply

    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.

    Reply

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

Reply

    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.

    Reply

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!

Reply

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.

Reply

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.

Reply

    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

    Reply

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.

Reply

Mika September 17, 2014

Hi Bill!
Thanks a lot! That worked.

Reply

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?

Reply

Bill Robbins September 17, 2014

It looks like the “bullet” is actually a dash that’s inserted via CSS. Try this to override it:


#site-nav ul ul li a:before {
	content: '';
}

Reply

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.

Reply

    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:

    
    #site-nav ul li a {
    	font-weight: 200;
    }
    
    #site-nav ul li.no-hover a {
    	font-weight: 600;
    }
    
    #site-nav ul li.no-hover a:hover {
    	color: #000;
    	cursor: default;
    }
    

    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.

    Reply

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.

Reply

    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.

    Reply

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.

Reply

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?

Reply

    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.

    Reply

Mujtaba June 12, 2014

Hi Bill,

i have done this but can not make the links unclickable, the address is rebuild.cmatrust.org

Reply

    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.

    Reply

Lakshmi May 30, 2014

Excellent Info Bill…..I have been searching for this info from past 30 days….

Reply

Ben April 8, 2014

THANK YOU! Good Stuff.

Reply

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?

Reply

    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:

    
    .no-hover a:hover {
        background: none !important;
        cursor: default;
    }
    

    Not seeing the site, there’s no way to know for certain.

    Reply

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…

Reply

    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.

    Reply

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!

Reply

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

Reply

    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.

    Reply

Josh Stauffer December 19, 2012

Now, that’s some creative thinking there, Bill. Also, I always forget about Jetpack. Thanks for the tip.

Reply

Submit Your Comment

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

Get all of our 25 themes (along with future themes) and lifetime updates for only 125 USD.Find out more
+