Stack the SharePoint 2013 Suite Bar on top of Ribbon

I had a great question from a student last week… how can you stack the SharePoint 2013 Suite Bar on top of the Ribbon, thus collapsing down the needed real estate for the top area of your SharePoint site.  You can accomplish this with a few lines of CSS. 

If you are looking for a solution like this for SharePoint Online / Office 365, please check out the sister post, Stack the SharePoint Suite Bar on top of Ribbon – SharePoint Online / Office 365.

Step 1: Hide unnecessary components

If you look at the Suite Bar, the items on the left (SharePoint text and links to tools) aren’t necessary, but the right side has some pretty vital stuff (welcome menu/sign in link and Site Actions).

If you look at the Ribbon, items on the right are important but items on the left (sharing, focus on content toggle, etc.) are less so.

These two areas can be collapsed down to reduce the needed space for the Suite Bar and the Ribbon at the top of your site.

Suite Bar and Ribbon components
Yellow boxes are important tools while red lined items aren’t necessary.

You can hide the unnecessary items with the following CSS:

/* Hide the left Suite Bar and right ribbon areas */
 #suiteBarLeft {
  	display: none;
 }
 #RibbonContainer-TabRowRight {
  	display: none !important; /* !important needed to override SharePoint inline style */
 }

Step 2: Float the Suite Bar

Next the Suite Bar needs to be removed from the flow of the document so the Ribbon area can slide up to the very top of the page. You can do this with a simple float:

#suiteBar {
	float: right;
	width: auto;
}

Works great but the Suite Bar is under the Ribbon area.

Suite Bar is under Ribbon
Floating the Suite Bar stacks the two areas, but the Suite Bar is under the Ribbon.

Step 3: Stack the Suite Bar to show on top of the Ribbon

The DIV that wraps the Suite Bar is before the DIV that wraps the Ribbon, so their natural stacked order is for the Ribbon to be on top.  Trying to fix this by targeting the Suite Bar and altering the stacking order (z-index) doesn’t work, but you can target the Ribbon and alter the stacking order for that instead.

#s4-ribbonrow {
	z-index: -1; /* Allows Suite Bar to show on top of Ribbon */
}

This works, but renders the Ribbon useless because you can no longer click on the Ribbon tabs. Add a little secret sauce in the form of position:static to get this working again:

#s4-ribbonrow {
	z-index: -1; /* Allows Suite Bar to show on top of Ribbon */
	position: static;  /* Secret sauce - needed to maintain ribbon functionality */
}

And the final result:

Suite Bar is over the Ribbon
The Suite Bar is on top of the Ribbon.

For IE8 and older, you need a little more code…

Due to float right challenges in IE8 and lower, you need to add a couple more properties to the #s4-ribbonrow style statement:

#s4-ribbonrow {
	z-index: -1; /* Allows Suite Bar to show on top of Ribbon */
	position: static;  /* Secret sauce - needed to maintain ribbon functionality */
	float: left; /* Needed for IE8 and older */
	width: auto;  /* Needed for IE8 and older */
}

If you don’t need to support IE8 and older, then leave the properties off. If you do and adding them creates more issues for other browsers, then you can use an IE conditional comment to include the added properties. Note you can’t do this in the CSS file, it would have to be in the HEAD tag of the master page file.

<![if lte IE 8]>
<style type="text/css">
#s4-ribbonrow {
	float: left;
	width: auto;  
}
</style>
<![endif]-->

Final code

/* Hide the left Suite Bar and right ribbon areas */
#suiteBarLeft {
	display: none;
}
#RibbonContainer-TabRowRight {
	display: none !important; /* !important needed to override SharePoint inline style */
}

/* Float the Suite Bar to remove from document flow and allow ribbon to move up */
#suiteBar {
	float: right;
	width: auto;
}

/* Alter stacking order and set positioning for ribbon */
#s4-ribbonrow {
	z-index: -1;  /* Allows Suite Bar to show on top of Ribbon */
	position: static;  /* Secret sauce - needed to maintain ribbon functionality */
}