Avoid wrapping of Menu items

Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.

/* Prevent word-wrap  */
.navbar .nav li {
white-space: nowrap; 
}

Credit: @ludwigt

8 thoughts on “Avoid wrapping of Menu items”

maadh
4 May 2015, 22 h 46 min

How can we disable menu rapping for 3.3?
Bob
4 June 2014, 6 h 05 min
Found this link in the Forum and added a missing bracket and changed a text size to em rather than px. Play with the 2nd and the 4th padding values and font size (remember “em” can be 1 or 1.2 or 1.5 or 2, not just whole integers.
```
.navbar .nav > li > a {
	padding: 5px 3px 5px 15px;
	font-size: 1em;
}
```
Marcus
22 November 2013, 19 h 29 min

Dave, well thank you for pointing us in the right direction. Cheers.
Dave Bardell Post author
22 November 2013, 16 h 35 min

I’d suggest the Forum would be a better place to get a solution for this. You’ll get a much wider audience. This isn’t my code, and I’ve not used it before.

Hope that helps.
Marcus
22 November 2013, 15 h 36 min

I think that the directive nowrap only stops wrapping multiple words within the same menu item. E.g. “About us”: the 2 words will not wrap.
Dan
22 November 2013, 8 h 46 min

Hi,

I have the same problem as Stacey, I have tried the code but the text is still wrapping. Please can you help?

Thanks!
Dave Bardell Post author
17 November 2013, 19 h 57 min

One of the few pieces of code I’ve not tested, many apologies. Can you send a link to your site and I’ll investigate.
Stacey
17 November 2013, 14 h 36 min

Hi,

I have tried putting the above code into the custom css and my very last menu item is still wrapping to the next line. How would I prevent this?

Thanks.

Comments are closed.

AUTHOR

Dave Bardell

8 thoughts on “Avoid wrapping of Menu items”