Hiding the left hand navigation bar in SharePoint 2013 proved a little tricker than I expected.
My initial attempt to hide the navigation using CSS was to hide #sideNavBox.
However, I found this had the side effect of hiding the search refiners on /_layouts/15/osssearchresults.aspx. I settled on hiding .ms-core-sideNavBox-removeLeftMargin as this doesn’t appear to have any side effects.
This is a quick post to show the CSS I used to style the global navigation / top navigation in SharePoint 2013.
I’ve used bright and different colours to make each CSS section easy to identify. The top level is in blue, when you hover over a link it changes to aqua. Hovering over a drop down item changes it to lime.
By default SharePoint wraps the menu item text, producing a result as below.
In order to ensure all each menu item is displayed on one line I had to update ul.dynamic as below, using min-width, white-space: no wrap and word-wrap: normal.
This is the result.