Styling the Global Navigation Bar

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!

Leave a Reply

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