Me & My SharePoint [FrontEnd]

© Christian Stahl – All about SharePoint branding & customizations

Customizing SharePoint 2013 global navigation with CSS and jQuery – Part 1 — November 30, 2013

Customizing SharePoint 2013 global navigation with CSS and jQuery – Part 1

It’s time for another blog series and this posts will be centered around how to customize and brand the global navigation in SharePoint 2013 online or on prem. In November 2010, I published three post in this subject for SharePoint 2010, and so far this posts together have generated 165.000 views and 166 comments. These blog entries has become a great success, and I am of course happy to be in any help when you are about to modify the navigation.

Creating a nice looking global navigation is a great way to improve the look and feel of the SharePoint site. A design that is well built and attractive will increase the usability and simply make the users happy! This post is based on a structural navigation in SharePoint 2013 server, and the focus is on the CSS parts. Let’s start with an easy example of how you can add some styling for the global navigation in order to get tabs in the navigation like the image below.

2013-globalnav

Three years have elapsed since the last time, so what has happened since SharePoint 2010 in terms of the global navigation?

  • The rendering markup from the navigation controls with class names has changed slightly
  • SharePoint 2013 is by default CSS3 and HTML 5 friendly
  • New jQuery framework and jQuery plugins to be used
  • Managed navigation that allows us to define the navigation based by Manage metadata

The OOTB markup for the global navigation looks like this:

HTMLnav

It’s still a complex markup and a lot of classes to deal with but let’s start with an easy example just to get going. I have added comments to the classes so you should be able to change for example colors and paddings by your needs. I’ll publish more examples in the next post.

/* --- Global navigation --- */
#DeltaPlaceHolderMain{
margin-top:30px;
}
.ms-breadcrumb-top{
background-color:#f2f2f2;
}
.ms-core-navigation > div > ul.root > li.static a:link, ul.root > li.static a:visited{
font-family:Arial; font-size:16px
}
/* links */
.ms-core-navigation > div > ul.root{
padding-top:8px;
padding-left:8px
}
.ms-core-navigation > div > ul.root > li a{
border:1px #fff solid;
padding:15px 20px 22px 20px;
font-size:15px;
}
.ms-core-navigation .ms-core-listMenu-horizontalBox li.static >  .ms-core-listMenu-item{
margin-right:8px
}
/* links not selected */
.ms-core-navigation > div > ul.root > li.static a:link, ul.root > li.static a:visited{
color:#222
}
/* links selected */
.ms-core-navigation > div > ul.root > li.static > ul.static > li.selected a:link, ul.root > li.static > ul.static > li.selected a:visited{
color:#222;
background-color:#fff
}
/* home link selected */
.ms-core-navigation div.ms-core-listMenu-horizontalBox > ul.static > li.selected a.selected{
border:1px transparent solid;
background-color:#fff
}
/* home */
.ms-core-navigation > div > ul.root > li.static > ul.static{
margin-left:0px
}
/* Hover */
.ms-breadcrumb-top .ms-core-navigation ul.static > li a:hover{
border:1px transparent solid;color:#222;
background-color:#fff
}

The next post in this series will cover

  • More branding examples you can download and use in your SharePoint environment
  • Using a ASP repeater control with jQuery to render custom markup
  • How to use jQuery for various UI effects
  • Branding example for a managed navigation

Please drop a comment if you have any question or just ideas for the next posts!

/ Christian