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.

RemLHNav1

 

My initial attempt to hide the navigation using CSS was to hide #sideNavBox.

RemLHNav2

 

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.

RemLHNav3

Advertisements

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.

SP2103TopNavCSS1

SP2103TopNavCSS2 SP2103TopNavCSS3 SP2103TopNavCSS4

 

By default SharePoint wraps the menu item text, producing a result as below.

TopNavWrap1

 

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.

TopNavWrap2

 

This is the result.

TopNavWrap3