Just over a year ago I wrote a post about stacking 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.  I was asked this week if it was possible to do it for SharePoint Online / Office 365. As with SharePoint 2013 on-premises, you can accomplish this with CSS – it just takes a few more lines of code to pull it off. 

If you are looking for a solution like this for SharePoint 2013 on-premises, please check out the sister post, Stack the SharePoint 2013 Suite Bar on top of Ribbon.

This post is going to sound a lot like the last one, Stack the SharePoint 2013 Suite Bar on top of Ribbon, because let’s face it, we are doing the same thing, just for a different flavor of SharePoint.

Step 1: Hide unnecessary components in the Suite Bar, if desired

If you look at the Suite Bar, the items on the left (Office Apps Launcher, Office 365 logo and the Sites button) aren’t necessarily required – it depends on your use of SharePoint Online. The right side on the other hand has some pretty vital stuff (most notably 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.

If you want to keep the left side Suite Bar tools (Office Apps Launcher, Office 365 logo and the Sites button) you certainly can, just skip this step.

You can hide the unnecessary items with the following CSS:

/* Hide Suite Bar elements */
#O365_MainLink_NavMenu, /*Office 365 App Dashboard link */
.o365cs-nav-header16 .o365cs-nav-topItem.o365cs-nav-o365Branding, /* Office 365 Logo */
#O365_MainLink_Logo + .o365cs-nav-appTitleLine, /* Divider between Office 365 logo and Sites button */
.o365cs-nav-topItem a[aria-label="Go to team sites"], /* Sites button */
#O365_MainLink_Help /* Help button (OPTIONAL) */ {
	display: none;
}

Step 2: Hide unnecessary components in the Ribbon

Use this CSS to hide the right side Ribbon components:

/* Hide right-side Ribbon options */
#RibbonContainer-TabRowRight {
	display: none !important;  /* !important needed to override SharePoint inline style */
}

Step 3: 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:

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

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

Step 4: 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.

/* Alter stacking order */
#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:

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

And the final result:

Step 5: Match up the height of the Suite Bar and Ribbon

Since the Suite Bar in SharePoint Online is taller than SharePoint 2013 on-premises we need to make some further adjustments to match up the Suite Bar height to the Ribbon or vice versa. Pick the one you want and implement the following code accordingly:

Match Suite Bar to Ribbon height

Add the following CSS to reset the Suite Bar components to match the ribbon height of 33 pixels. You will need to set the width for the first style statement based on what you have opted to show in the Suite Bar.

/* Use one of the following widths based on what is displayed in the Suite Bar: */
#suiteBarDelta {
/* Notifications, Site Actions and Profile Pic only */
	width: 139px;
/* Notifications, Site Actions, Help and Profile Pic only */
	/* width: 189px; */
/* All Suite Bar options */
	/* width: 430px;  */
}

/* Reset Suite Bar container height */
#suiteBarTop {
	height: 33px !important;  /* !important needed to override SharePoint inline style */
}

/* Change height of nested components in Suite Bar */
#suiteBarDelta .o365cs-nav-header16,
#suiteBarDelta .o365cs-nav-header16 .o365cs-nav-o365Branding,
#suiteBarDelta .o365cs-nav-header16 .o365cs-nav-button,
#suiteBarDelta .o365cs-me-tileview,
#suiteBarDelta .o365cs-me-presence5x50,
#suiteBarDelta .o365cs-me-tileimg-doughboy,
#suiteBarDelta .o365cs-me-tileimg {
	height: 33px;
}

/* Change width of nested components in Suite Bar */
#suiteBarDelta .o365cs-me-tileview,
#suiteBarDelta .o365cs-me-tileimg{
	width: 33px;
}
#suiteBarDelta .o365cs-nav-header16 .o365cs-me-nav-item {
	min-width: 38px;
}

/* Reset Suite Bar Text (if showing Office 356 and Sites) */
#suiteBarDelta .o365cs-nav-header16 .o365cs-nav-brandingText {
	font-size: 16px;
	line-height: 1;
	margin-top: -5px;
}

/* Reset profile pic image size */
#suiteBarDelta .o365cs-me-personaimg {
	height: 33px;
	width: 33px !important;  /* !important needed to override SharePoint inline style */
}

/* Alter location of notification number bubble */
#suiteBarDelta .o365cs-flexPane-unseenCount {
	top: 15px;
	left: 5px;
}

Here is the final result:

Match Ribbon to Suite Bar height

Alternatively use the following code to match the Ribbon to the Suite Bar height of 50 pixels. You will need to set the width for the first style statement based on what you have opted to show in the Suite Bar.

/* Use one of the following widths based on what is displayed in the Suite Bar: */
#suiteBarDelta {
/* Notifications, Site Actions and Profile Pic only */
	width: 156px;
/* Notifications, Site Actions, Help and Profile Pic only */
	/* width: 206px; */
/* All Suite Bar options */
	/* width: 490px;  */
}

/* Override inline style height to match Suite Bar height */
#s4-ribbonrow {
	height: 50px !important;  /* !important needed to override SharePoint inline style */
}

/* Increase height of nested Ribbon containers */
#globalNavBox,
.ms-cui-topBar2,
.ms-cui-tts, .ms-cui-tts-scale-1, .ms-cui-tts-scale-2,
.ms-cui-tt, .ms-cui-cg {
	height: 50px;
}

/* Space down Ribbon tabs */
.ms-cui-tt-a {
	margin-top: 19px;
}

And the result:

A note about the width property

The width business in this last step is a pain at best. The better solution would be to set the width to auto and let it naturally expand to the amount of space needed for the visible Suite Bar items. Unfortunately the auto value wasn’t working in IE or Chrome in this particular case. So setting an exact width was the alternative.

Final code

Note that the code below has BOTH height solutions. If you use this as is in SharePoint, the Ribbon will increase in height and the Suite Bar will decrease in height. You need to pick one or the other and delete out the unnecessary solution.

/* ---- Common Rules ---- */

	/* Hide Suite Bar elements */
		#O365_MainLink_NavMenu, /*Office 365 App Dashboard link */
		.o365cs-nav-header16 .o365cs-nav-topItem.o365cs-nav-o365Branding, /* Office 365 Logo */
		#O365_MainLink_Logo + .o365cs-nav-appTitleLine, /* Divider between Office 365 logo and Sites button */
		.o365cs-nav-topItem a[aria-label="Go to team sites"], /* Sites button */
		#O365_MainLink_Help /* Help button (OPTIONAL) */ {
			display: none;
		}

	/* Hide right-side Ribbon options */
		#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 */
		#suiteBarDelta {
			float: right;
		}

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


/* ----------------------- Correct Height of Bars ----------------------- */

	/* ---- To force Suite Bar to match Ribbon height ---- */

		/* Use one of the following widths based on what is displayed in the Suite Bar: */
			#suiteBarDelta {
			/* Notifications, Site Actions and Profile Pic only */
				width: 139px;
			/* Notifications, Site Actions, Help and Profile Pic only */
				/* width: 189px; */
			/* All Suite Bar options */
				/* width: 430px;  */
			}

		/* Reset Suite Bar container height */
			#suiteBarTop {
				height: 33px !important;  /* !important needed to override SharePoint inline style */
			}

		/* Change height of nested components in Suite Bar */
			#suiteBarDelta .o365cs-nav-header16,
			#suiteBarDelta .o365cs-nav-header16 .o365cs-nav-o365Branding,
			#suiteBarDelta .o365cs-nav-header16 .o365cs-nav-button,
			#suiteBarDelta .o365cs-me-tileview,
			#suiteBarDelta .o365cs-me-presence5x50,
			#suiteBarDelta .o365cs-me-tileimg-doughboy,
			#suiteBarDelta .o365cs-me-tileimg {
				height: 33px;
			}

		/* Change width of nested components in Suite Bar */
			#suiteBarDelta .o365cs-me-tileview,
			#suiteBarDelta .o365cs-me-tileimg{
				width: 33px;
			}
			#suiteBarDelta .o365cs-nav-header16 .o365cs-me-nav-item {
				min-width: 38px;
			}

		/* Reset Suite Bar Text (if showing Office 356 and Sites) */
			#suiteBarDelta .o365cs-nav-header16 .o365cs-nav-brandingText {
				font-size: 16px;
				line-height: 1;
				margin-top: -5px;
			}

		/* Reset profile pic image size */
			#suiteBarDelta .o365cs-me-personaimg {
				height: 33px;
				width: 33px !important;  /* !important needed to override SharePoint inline style */
			}

		/* Alter location of notification number bubble */
			#suiteBarDelta .o365cs-flexPane-unseenCount {
				top: 15px;
				left: 5px;
			}



/* ----------------------- OR ----------------------- */



	/* ---- To force Ribbon to match Suite Bar height ---- */

		/* Use one of the following widths based on what is displayed in the Suite Bar: */
			#suiteBarDelta {
			/* Notifications, Site Actions and Profile Pic only */
				width: 156px;
			/* Notifications, Site Actions, Help and Profile Pic only */
				/* width: 206px; */
			/* All Suite Bar options */
				/* width: 490px;  */
			}

		/* Override inline style height to match Suite Bar height */
			#s4-ribbonrow {
				height: 50px !important;  /* !important needed to override SharePoint inline style */
			}

		/* Increase height of nested Ribbon containers */
			#globalNavBox,
			.ms-cui-topBar2,
			.ms-cui-tts, .ms-cui-tts-scale-1, .ms-cui-tts-scale-2,
			.ms-cui-tt, .ms-cui-cg {
				height: 50px;
			}

		/* Space down Ribbon tabs */
			.ms-cui-tt-a {
				margin-top: 19px;
			}