Monday, October 20, 2014

Branding the SharePoint 2013 Global Navigation – Structural

Posted in [SharePoint], [Technical] By Kyle Wright @ 5/19/2014

A few months ago I posted on How to Brand the SharePoint 2013 Global Navigation if you were using the Managed Metadata service to render your navigation using a term set.  Unfortunately, if you use the standard Structural Navigation, the code doesn’t work.  The menu code renders differently if you use structural versus managed navigation.  I received a few comments from people looking to use this code on their structural navigation, so I thought I would write an updated post.  So, this post is going to look at how to leverage the same base CSS code but modify it to work on the structural navigation.  The end result will be exactly the same look as the managed navigation.

5-7-2014 3-22-32 PM

Again, the navigation snippet is wrapped with the following code in my master page.  Remember to use the snippet from the Seattle.html master page instead of the one from the Snippet Generation tool.  Check out more lessons learned in my post on Managed Navigation.

   1: <div id="navigation-bar">
   2:     <div id="g-navigation">
   3:         <!--Navigation snippet here-->
   4:     </div>
   5:     <div id="g-search">
   6:         <!--Search snippet here-->
   7:     </div>
   8: </div>

I’ll paste in the full CSS code then call out some of the differences between this version and the previous.  For a full explanation, see the previous post listed above.

   1: #g-navigation {
   2:     float:left; 
   3:     width:65%;
   4: }
   5: #g-navigation-bar {
   6:     background-image:url(../images/sprite.png);
   7:     background-repeat:no-repeat;
   8: }
   9: #navigation-bar{
  10:     height:25px;
  11:     background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 100%); /* FF3.6+ */
  12:     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f3f3f3)); /* Chrome,Safari4+ */
  13:     background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 100%); /* Chrome10+,Safari5.1+ */
  14:     background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 100%); /* Opera11.10+ */
  15:     background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 100%); /* IE10+ */
  16:     -moz-box-shadow:-1px -1px 0 #FFF inset, 0 1px 3px rgba(0,0,0,0.1);
  17:     -webkit-box-shadow:-1px -1px 0 #FFF inset, 0 1px 3px rgba(0,0,0,0.1);
  18:     box-shadow:-1px -1px 0 #FFF inset, 0 1px 3px rgba(0,0,0,0.1);
  19: }
  20: /*Disable the inline link editing menu*/
  21: .ms-core-listMenu-horizontalBox > .ms-core-listMenu-root > .ms-listMenu-editLink {
  22:     display:none;
  23: }
  24: .ms-core-listMenu-horizontalBox ul, .ms-core-listMenu-horizontalBox li{
  25:     display:block;
  26: }
  27:  
  28: /*Hide the site navigation item*/
  29: .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root > li > a {
  30:     display:none;
  31: }
  32: /*Level1*/
  33: .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item{
  34:     margin-right:0px !important;
  35: }
  36: .ms-navedit-editLinksText > span > .ms-metadata{
  37:     color:#ffffff !important;
  38: }
  39: .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root ul.static {
  40:     position:relative;
  41:     z-index:10;
  42:     padding-left:0px;
  43: }
  44: .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root ul.static li {
  45:     font-weight:bold;
  46:     float:left;
  47:     position:relative;
  48:     padding:0px;
  49:     margin:0px;
  50: }
  51: .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root ul.static > li:first-child > a{
  52:     color:#FFF !important;
  53:     background-position:0px -95px;
  54:     padding-left:30px;
  55: }
  56: .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root ul.static > li:first-child {
  57:     background:url(../images/sprite-menu.png) repeat-x left bottom #872434;
  58:     -webkit-border-top-left-radius: 5px;
  59:     -webkit-border-bottom-left-radius: 5px;
  60:     -moz-border-radius-topleft: 5px;
  61:     -moz-border-radius-bottomleft: 5px;
  62:     border-top-left-radius: 5px;
  63:     border-bottom-left-radius: 5px;
  64: }
  65: .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root ul.static > li {
  66:     padding:13px 15px 10px;
  67:     color:#787878;
  68:     position:relative;
  69:     z-index:10
  70: }
  71: .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root ul.static li a, .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root li a.selected {
  72:     color:#787878
  73: }
  74: .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root ul.static li a.parent {
  75:     padding-right:25px;
  76:     position:relative
  77: }
  78: .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root ul.static li:hover {
  79:     background:url(../images/sprite-menu.png) repeat-x left top #872434;
  80: }
  81: .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root ul.static li:hover > span {
  82:     color:#ffffff !important;
  83: }
  84: .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root ul.static > li:hover > a {
  85:     text-decoration:none;color:#FFF !important;
  86: }
  87: .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root ul.static > li.dynamic-children:hover > .ms-core-listMenu-item{
  88:     color:#ffffff !important;
  89: }
  90:   
  91: /*Level 2*/
  92: .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root ul.static li:hover ul {
  93:     display: block;
  94: }
  95: .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root ul.static li:hover ul ul {
  96:     display: none;
  97: }
  98: .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root ul.static ul {
  99:     width:200px !important;
 100:     position:absolute;
 101:     top:100%;
 102:     margin-top:4px;
 103:     left:0;
 104:     display:none;
 105:     padding:0px;
 106:     list-style:none;
 107: }
 108: .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root ul.static ul li {
 109:     background:#fbfbfb;
 110:     border-bottom:1px solid #f2f2f2;
 111:     border-top:1px solid #fff;
 112:     float:none;
 113:     clear:both;
 114:     margin-right:0;
 115:     font-weight:normal;
 116:     border-left:5px solid #fbfbfb;
 117: }
 118: .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root ul.static ul li:first-child {
 119:     border-top:none;
 120: }
 121: .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root ul.static ul li a {
 122:     padding:4px 4px;
 123: }
 124: .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root ul.static li ul li a span {
 125:     background-position:0 -9px;
 126:     top:10px;
 127: }
 128: .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root ul.static ul li:hover {
 129:     border-left:5px solid #872434;
 130:     background:#FFF;
 131:     color:#787878;
 132: }
 133: .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root ul.static li ul li:hover {
 134:     background:#FFF;
 135:     border-left:5px solid #872434;
 136: }
 137: .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root ul.static li ul li:hover a {
 138:     color:#787878
 139: }
 140:    
 141: /*Level 3+*/
 142: .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root ul.static ul li ul {
 143:     left:0;
 144:     top:0;
 145:     padding-left:0px;
 146:     display:none;
 147:     margin:-2px 0 0 -7px;
 148: }
 149: .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root ul.static li ul li:hover ul {
 150:     display: block;
 151: }

 

There is another UL that gets added to the structural navigation.  Almost all lines above get an extra ul.static appended to the front of the rest of the identifiers to account for this. 

Lines 81-83 fix some color issues with the new levels.

Lines 29-31 hide the site title that tries to be rendered as a navigation item.  This becomes a single parent to all other navigation items, and I would rather remove it fully, then just add it to the navigation setup if needed later.

If you are using static images instead of sprites then you will need to update the CSS accordingly. We are using them to help with page load times. If you just copy/paste this, your images will likely show up very weird due to the extra positioning I am using here to adjust for the sprites.

For more information about C5 Insight or this blog entry, please Contact Us.



, , ,

Comments

Got something to say? Join the discussion »
    Posted by rozina on 6/2/2014
    it was Informative Post,and Knowledgeable also.As a trainer I like your post it was Useful and Excellent.

leave a reply

 [Quick Submit with Ctrl+Enter]

Remember my details
Notify me of followup comments via e-mail

C5_Insight

About C5 Insight

We are a Microsoft Gold Certified partner focusing on SharePoint, Microsoft Dynamics CRM and Salesforce.com.  Learn more about us by visiting our website.

Search

We Wrote the Bible on Microsoft SharePoint and Dynamics CRMBook-Microsoft Dynamics CRM 2011 and SharePoint 2010 Bible

Tags

Maximize

Recent Comments

Maximize

Blog Roll

Maximize

Disclaimer

The information herein may be used solely at your own risk.  No warranty is made by the author or by C5 Insight, Inc.

The opinons expressed herein are those of the individual authors and do not necessarily represent C5 Insight, Inc in any way.

Copyright 2011-2013 by C5 Insight