SharePoint 2013: Add custom content/row after the Suite Bar

You can add rows after the Suite Bar with the same or a different structure as the Suite Bar.

The suite bar has left and right areas (styled as table-cells) that you can reproduce using the same CSS methods. This way you can align your content with the pre-existing content.

You can also add a “one cell” row, I show you how to below.

Add your table row immediately below the div#suiteBar, in your masterpage. Like this:

<div id="suiteBar" class="ms-dialogHidden noindex">
(...)
</div> 
<!-- Use the class .ms-dialogHidden to hide the rows in the dialog boxes -->
<div class="my-suite-row ms-dialogHidden">
    <div class="my-cell my-cellLeft">Left</div>
    <div class="my-cell my-cellRight">Right</div>
</div> 
<div class="my-suite-row my-suite-row-fullwidth">
    <div class="my-cell my-cellFullWidth">Full Width</div>
</div> 

The CSS you’ll need:

.my-suite-row {
    background: red;
    display: table-row;
    height: 40px;
}
.my-cell {
    display: table-cell;    
}
.my-suite-row-fullwidth {
    position: relative;
}
.my-cellFullWidth {
    background: green;
    position: absolute;
    width: 100%;
    height: 40px;
}

This is the result:

Dércia Silva
Posted by Dércia Silva on April 17, 2014

Related articles