Tag Archives: Cascading Style Sheets

SharePoint 2013 Hide Left Hand Navigation Bar

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.


SharePoint 2013 Global Navigation Styling CSS

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.


SP2103TopNavCSS2 SP2103TopNavCSS3 SP2103TopNavCSS4


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.