Click here to Skip to main content
14,266,194 members

SharePoint 2013: Customise Top Link Bar

Rate this:
0.00 (No votes)
Please Sign up or sign in to vote.
0.00 (No votes)
11 Sep 2018CPOL
This blog describes how to modify the SharePoint 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.
OR
  • 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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Sunil Kumar Pashikanti
Web Developer
India India
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
Tip/Trick
Posted 11 Sep 2018

Stats

2.7K views
2 bookmarked