SharePoint 2013: Customise Top Link Bar

Most of us want to customize our SharePoint pages as per our requirements, this blog describes how to modify the SharePoint top link bar.

The Top link bar consists of the following sections:

1. Suite Bar
   1. Suite Bar Left
   2. Suite Bar Right
2. Delta SP Ribbon
   1. RibbonContainer-TabRowLeft
   2. RibbonContainer-TabRowRight

Now, we will do the following customizations to the Top Link Bar:

1. Hide the Suite Bar.
2. Prepend the Suite Bar Right to the RibbonContainer-TabRowRight (so that the Suite Bar Right and RibbonContainer-TabRowRight will be displayed in the same row.)

Once we are done with the above instructions, the Top link bar is going to look like the below screenshot.

Use the following JavaScript and CSS code to apply the changes:

<style>
 .ms-qatbutton { padding-bottom: 19px !important;}
span.ms-promotedActionButton-text {padding-bottom: 19px !important;}
#suiteBarLeft{ background-color: rgba( 239,239,239,0.78 ); }
.ms-tableCell.ms-verticalAlignMiddle { color: rgba( 239,239,239,0.78 ); }
 div#DeltaSuiteLinks {display: none; }
 #suiteBar { display: none; }
</style>
<script type="text/javascript">
$( "#RibbonContainer-TabRowRight" ).prepend( $( "#DeltaSuiteBarRight" ) );
</script>

• If the above code is added to the master page, the changes will be applied to all the pages where the master page is inherited.

• If the changes are to be applied to a specific page, then add a content editor web part to that page, edit the web part, and in the edit source, dump the above code into it.

That's it!!! You have successfully modified the Top Link Bar of SharePoint 2013.

• Configure the top link bar
• Customize the top link bar
• SharePoint Site Modify Top Link Bar
• Customizing the SharePoint Top Link bars
• How to: Customize the Display of the Top Link Bar
• Top Link Bar in SharePoint 2013
• How to change the order of the items on the Top Link Bar