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: