How to Customize a SharePoint 2013 Site Top Navigation Bar
To get articles like this free in your inbox, subscribe to our newsletter.
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:
Gain access to key best practices for SharePoint optimization and how to use it easily in the cloud. Talk to an expert today!
- 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.
- Create a new Web Part page in the site choosing one of the available templates.
- Once the Web Parts page is created, add a Script Editor to one of the Web Parts zones available in the page.
- Click the “EDIT SNIPPET” configuration option in the Web Part.
- In the popup window that is shown, just add the following JavaScript code:
<span id="lnum1" style="color: #606060;"> 1:</span> <script language=<span style="color: #006080;">"javascript"</span>>
<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> </script>
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.
- 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> <script language=<span style="color: #006080;">"javascript"</span>>
<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> </script>
- 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.
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.
Gain access to key best practices for SharePoint optimization and how to use it easily in the cloud. Talk to an expert today!
What you should do next…
1. Subscribe to our newsletter:
Subscribe to our newsletter below for the latest news, advice and thought-leadership for software professionals. Or visit our blog to browse our most recent articles.
2. Learn how virtual labs can grow your business:
To learn more about how CloudShare helps software organizations grow revenue, increase efficiency and improve quality, visit our resources page. You’ll be able to browser dozens of valuable white papers, eBooks, webinars, case studies, and brochures.
3. Get a FREE, no obligation demo:
Discover just how easy it is to create your cloud environment—in minutes! One of our friendly virtual labs experts will be happy to:
- Show you the platform in action
- Calculate pricing for your business
- Set you up with a 14-day free trial
- Answer any questions you have
- No pressure or obligation