SharePoint 2010 Reducing the Space Above the Ribbon


The SharePoint 2010 ribbon, I find, is an unwieldy beast, when not actually in use it still takes up 43px in height of your screen real estate, and trying to fit that into even a relatively low-touch branding project isn’t easy.

Consider the OOTB ribbon shown below.

OOTB Ribbon
OOTB Ribbon

Or an OOTB ribbon on a recent project (the ribbon bar is shown in black for reference)

OOTB Ribbon
OOTB Ribbon

It takes up a lot of space, however this can be improved by reducing the space taken up by (the height of) the ribbon group tabs, which when in a resting state, aren’t shown, as you can see above.

In your CSS file or masterpage add the following CSS

.ms-cui-topBar2
{ height:auto;min-height:25px; border-bottom:0px;}
.ms-cui-TabRowLeft
{ margin-top:1px; }
#s4-ribbonrow,
BODY #s4-ribbonrow
{ min-height:25px; }

This removes the explicit height (set to auto) and changes the min-height to 24px (which you can adjust to whatever you need accordingly).

Reduced Ribbon
Reduced Ribbon

Now add an EditModePanel to your masterpage, add a script block and add the following CSS – this simply reverts the previous CSS settings

.ms-cui-topBar2
  { height:43px; min-height:43px; }
  
  .ms-cui-TabRowLeft
  { margin-top:1px; }
  
  #s4-ribbonrow,
  BODY #s4-ribbonrow
  { min-height:43px; display:block!important; }
Ribbon in Page Edit Mode
Ribbon in Page Edit Mode

This also works for site pages – navigating to a document library, shows the document library ribbon controls when they’re activated

Ribbon in Document Library
Ribbon in Document Library
Selecting List Settings
Selecting List Settings
Selecting a List Item
Selecting a List Item

Published by

Phil Harding

SharePoint Consultant, Developer, Father, Husband and Climber.

2 thoughts on “SharePoint 2010 Reducing the Space Above the Ribbon

  1. Great article, but i’m planning to put TabRowRight lower, Do You know how to do this? I mean in the same row as TabRowLeft in original Master Page.

  2. Please let me know what is “script block” from this article because i want to test your solution but still can’t.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s