How to Customize a SharePoint 2013 Site Top Navigation Bar

By Danielle Arad - May 28, 2013

As you know, SharePoint 2013 sites have a new look and feel aligned with modern UI interfaces. For instance, the new Team Site template includes Live Tiles in the home page. Additionally, every SharePoint 2013 site has new navigation top bars designed to simplify how a SharePoint user can access common places and functions like his personal Skydrive, his social content areas, etc. In this article I will show how you can easily customize these navigation bars by using JavaScript:

 

  • First, you need to access SharePoint 2013 either in a CloudShare environment or in Office 365. In my case, I will show you how to customize top navigation bars in SharePoint Online in Office 365.

image

  • Create a new Web Part page in the site choosing one of the available templates.

image

  • Once the Web Parts page is created, add a Script Editor to one of the Web Parts zones available in the page.

image

  • Click the “EDIT SNIPPET” configuration option in the Web Part.

image

  • In the popup window that is shown, just add the following JavaScript code:
<span id="lnum1" style="color: #606060;"> 1:</span> &lt;script language=<span style="color: #006080;">"javascript"</span>&gt;
<span id="lnum2" style="color: #606060;"> 2:</span> _spBodyOnLoadFunctionNames.push(<span style="color: #006080;">"HideBrandingsuite"</span>);
<span id="lnum3" style="color: #606060;"> 3:</span> <span style="color: #0000ff;">function</span> HideBrandingsuite()
<span id="lnum4" style="color: #606060;"> 4:</span> {
<span id="lnum5" style="color: #606060;"> 5:</span> document.getElementById(<span style="color: #006080;">'suiteBarLeft'</span>).style.visibility = <span style="color: #006080;">'hidden'</span>;
<span id="lnum6" style="color: #606060;"> 6:</span> }
<span id="lnum7" style="color: #606060;"> 7:</span> &lt;/script&gt;

As you can see, the code allows you to find the top navigation bar identified by “suiteBarLeft” and hide it by configuring the “visibility” property with the “hidden” value.

  • Save the page modifications and as expected, you can see how the top navigation bar is not shown any more for that page.

image

  • If you want just to add some custom styles to the top bar, you can use similar JavaScript code:
<span id="lnum1" style="color: #606060;"> 1:</span> &lt;script language=<span style="color: #006080;">"javascript"</span>&gt;
<span id="lnum2" style="color: #606060;"> 2:</span> _spBodyOnLoadFunctionNames.push(<span style="color: #006080;">"HideBrandingsuite"</span>);
<span id="lnum3" style="color: #606060;"> 3:</span> <span style="color: #0000ff;">function</span> HideBrandingsuite()
<span id="lnum4" style="color: #606060;"> 4:</span> {
<span id="lnum5" style="color: #606060;"> 5:</span> document.getElementById(<span style="color: #006080;">'suiteBarLeft'</span>).style.background=<span style="color: #006080;">'#000000'</span>;
<span id="lnum6" style="color: #606060;"> 6:</span> }
<span id="lnum7" style="color: #606060;"> 7:</span> &lt;/script&gt;
  • In this case, we are just configuring the “background” property with a “black” value (#000000 code). If you save these modifications, you will see how the background of the top bar has changed to black.

image

And that’s all about how to customize top navigation bars in a SharePoint 2013 site. Of course, you can apply these kinds of customizations to the entire site by modifying the site master page.