Fix Text Wrapping In Drop Down Sub Menus On Office 365 Sharepoint Sites

navwrap2One of the most important things about a public site is the navigation – that’s how people find their way around the site after all. Office 365 sites include a drop down menu that allows you to display links to as many locations as you need in a small amount of space. Unfortunately, if you have a multi word page title in a sub menu, the fixed width of the sub menu container may cause an unwanted line break.
Not only is this ugly looking, it can also make it very hard to identify a page and navigate the site. If properly designed, the container would expand to fit its contents without forcing longer titles to wrap to another line. Luckily, it’s very easy to fix.

Sign in to open the site for editing
On any page click the “site” tab
Add this to the site’s custom stylesheet:
ul.dynamic{min-width:100% !important;white-space:nowrap !important;}
If it doesn’t work for you, it may be because the rule isn’t getting applied in the stylesheet. A fix for that is covered here:
Adding Custom Styling To The Office 365 Sharepoint 2013 Public Website
Also, in some cases you may need to “supersize” the ul element so it fits behind the menu links. For that, change the min-width:
ul.dynamic{min-width:150% !important;}

That’s it!

Visit my forum » if you have any questions. For development work, you can contact me here ». And if you think this would be useful to others, feel free to share it by clicking one of the share buttons up top!