Me & My SharePoint [FrontEnd]

© Christian Stahl – All about SharePoint branding & customizations

Customizing SharePoint 2013 global navigation with CSS and jQuery – Part 5 — March 31, 2014

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

Time for the last post in the series about how to customize the global navigation in SharePoint 2013. In this post, you get two new examples of how you can customize the navigation with the help of CSS. This will work for SharePoint 2013, Online or Onprem when using structural navigation.

Nav-Red

Add a nav tag in the master page

I added a nav tag as a container for the SharePoint top menu control. The nav tag is a new tag in HTML 5 and the element should be used for major navigation blocks in the html file. It’s a semantic tag that tells the browser or other reading software such as a search engine that it’s a navigation, compared to a div that just don’t say anything about its content. The CSS is dependent on this nav tag, so if you want to cut & paste, you need to add the nav tag in the master.

<nav>
<SharePoint:AjaxDelta id="DeltaTopNavigation" BlockElement="true" CssClass="ms-displayInline ms-core-navigation" role="navigation" runat="server">
<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">
<Template_Controls>
<asp:SiteMapDataSource ShowStartingNode="False" SiteMapProvider="SPNavigationProvider"
id="topSiteMap"	runat="server" StartingNodeUrl="sid:1002"/>
</Template_Controls>
</SharePoint:DelegateControl>
<asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server">
<SharePoint:AspMenu ID="TopNavigationMenu"
Runat="server" EnableViewState="false" DataSourceID="topSiteMap"
AccessKey="<%$Resources:wss,navigation_accesskey%>"
UseSimpleRendering="true" UseSeparateCss="false"
Orientation="Horizontal"
StaticDisplayLevels="2" AdjustForShowStartingNode="true"
MaximumDynamicDisplayLevels="2"	SkipLinkText="" />
</asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>			
</nav>

CSS for the red navigation

In this first example, I use the CSS:after selector to get an arrow and set it’s position relative to it’s parent element, in this I can set the arrow to a selected element with out the use of a image.

#pageTitle{
display:none
}
nav ul li {
background:#dd4433;
border-left: 1px solid #c73d2e;
text-align: center;
height:55px;
}
nav ul li a {
font:16px/36px Arial, Helvetica, sans-serif;
color: #fff;
width:140px;
height:46px;
}
nav{margin:5px auto}
nav ul.root > li.static > ul.static{
border-left:1px #ee4e3d solid;
}
nav .ms-core-navigation .ms-core-listMenu-horizontalBox li.static >  .ms-core-listMenu-item{
margin-right:10px;
padding-top:7px;
margin:0px 0px 0px 0px
}
nav .ms-core-navigation .ms-core-listMenu-item, nav .ms-core-navigation .ms-core-listMenu-item:link, nav .ms-core-navigation .ms-core-listMenu-item:visited{
color:#fff;
}
nav .ms-core-navigation .ms-core-listMenu-horizontalBox ul.static > li.selected > a > span > span{color:#fff}
nav ul li a:hover{color:#000}
nav li{border-right:1px solid #ee4e3d}
nav li:last-child{border-right:0px solid #ee4e3d}
nav li.selected:after{
content:'';
position:relative;
width:0px;
display:block;
left:60px;
border:10px solid transparent;
border-top:8px solid #d43;
}

CSS for the blue navigation

For this blue navigation I use a smooth CSS gradient and a portion of border radius to get the rounded corners. If you want to adjust the width to be stretched relative to it’s content, you can use the out commented paddings instead of the fixed width if you prefer.

Nav-Blue

nav {
overflow:hidden
}
#pageTitle{
display:none
}
nav ul li {
background: #618ba4; /* Old browsers */
background: -moz-linear-gradient(top, #618ba4 0%, #406a82 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#618ba4), color-stop(100%,#406a82)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #618ba4 0%,#406a82 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #618ba4 0%,#406a82 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #618ba4 0%,#406a82 100%); /* IE10+ */
background: linear-gradient(to bottom, #618ba4 0%,#406a82 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#618ba4', endColorstr='#406a82',GradientType=0 ); /* IE6-9 */
border-left: 1px solid #7395a8;
border-right: 1px solid #406275;
text-align: center;
height:55px;
}
nav ul li a {
font:16px/36px Arial, Helvetica, sans-serif;
color: #fff;
width:140px;
height:46px;
/*padding-right:20px;padding-left:20px*/
}
nav ul li:last-child {
border-right: none;
border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
-webkit-border-radius: 0px 5px 5px 0px;
}
nav {
margin:1px auto;
border-radius:5px;
}
nav ul.root > li.static > ul.static{
border-left:1px #406a82 solid;
}
nav div > div > ul.static > li.static a:hover{
background: #406a82;
height:46px;
}
nav div > div > ul.static > li.static > ul.static > li:hover {
background: #406a82;
}
nav div > ul.root > li.selected a:hover {
background: #406a82!important;
height:55px;
}
nav .ms-core-navigation .ms-core-listMenu-horizontalBox li.static >  .ms-core-listMenu-item{
margin-right:10px;
padding-top:7px;
margin:0px 0px 0px 0px
}
nav .ms-core-navigation .ms-core-listMenu-item, nav .ms-core-navigation .ms-core-listMenu-item:link, nav .ms-core-navigation .ms-core-listMenu-item:visited{
color:#fff;
}
nav .ms-core-navigation .ms-core-listMenu-horizontalBox ul.static > li.selected > a > span > span{
color: #fff;
}

Take a look at the previous posts here:

I hope you had joy of this posts in the series! Please drop a comment if you have any question.

/ Christian