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 */
}

33 thoughts on “Stack the SharePoint 2013 Suite Bar on top of Ribbon”

  1. This works for Chrome, but not for IE8. How to fix that? I can barely see the Browse…. pushed down into the title area.
    Thanks.

    1. The fix is to add a float: left and width: auto to #s4-ribbonrow style statement. This is due to how IE8 handles right floats. I will update the post to reflect these changes.

  2. I noticed that this works if you are an collection admin, but if you log in with a normal user account that doesn’t have the ability to edit the page the suite bar doesn’t display. This happened to be exactly what I wanted, but I have no idea why it’s happened.

    1. As is, the code hides the Suite Bar (left blue bar items) from all users, not just readers. Perhaps I am misunderstanding what is happening on your end.

      1. Whoops, it was an unpublished change in my master page, my bad ;). If I understand correctly, yes, the CSS you added hides the suiteBarLeft, which is the “SharePoint” .ms-core-brandingText. The portion you float right, #suiteBar, is the user name, edit (settings) icon, and help icon, which also has it’s own id of #suiteBarRight. I had inserted a scriptblock in the master page to add a visibility:hidden to suiteBarRight, forcing it to disappear after load. Sorry for the confusion.

Leave a Reply

Your email address will not be published. Required fields are marked *

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