I am setting up a new SharePoint 2016 lab at home to increase my depth of knowledge of the product. (Tip: That depth is pretty shallow at the moment, so if you decide to try this, don’t do it on a production server. I make no claims to understanding best practices regarding customization.)
After configuring my global navigation bar to display subsites, I really didn’t like how the text of the long names wrapped. Fixing that is a job for custom CSS!
Full credit for explaining the specific section of CSS to override goes to Richard Skinner in his blog post SharePoint 2013 Global Navigation Styling CSS. I put the following code in a text file called GlobalNavBar.css:
ul.dynamic{
min-width: 190px;
white-space: nowrap;
word-wrap: normal;
}But where to put this file? Based on Tom Daly’s response to a forum post, I created a new folder for the file at C:\Program Files\Common Files\microsoft shared\Web Server Extensions\16\TEMPLATE\LAYOUTS\1033\STYLES. I then edited the seattle.master to add the new CSS file after the standard one. (NOTE: I did not edit the master instance of seattle.master – I made a copy and pointed my site to the copy before editing.)
After saving seattle.master and refreshing the page, the end result was a much nicer presentation of the menu items.
Do you have a better method for solving this problem? I’d love to learn what it is!