Friday, February 12, 2016

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 Ren Lyke on 2/2/2015
    Hi

    Could you let me know where do i post this code snippet in my custom master page.

    cannot be found.

    This is the code that i have for the top navigation.








    "
    UseSimpleRendering="true"
    UseSeparateCss="false"
    Orientation="Horizontal"
    StaticDisplayLevels="2"
    AdjustForShowStartingNode="true"
    MaximumDynamicDisplayLevels="2"
    SkipLinkText="" />




    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.

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

Upcoming Events


The Evolution of the Intranet: Creating a Culture of Collaboration

02/18/16 @ 3:00 PM ET This webcast will be broadcast LIVE from Transitioning Your Intranet to a Digital Workplace - See mo......

Deminar: Microsoft Social Engagement for Marketing, Sales, Service and Research

02/24/16 @ 2:00 PM ET In this deminar (that's demo + seminar) session, we will take a look at the Microsoft Social Engagem......

The 7 Deadly Sins of SharePoint: Planning Success and Avoiding Failure

03/10/16 @ 3:00 PM ET 60% of SharePoint projects are stalled, struggling, or failing, according to research conducted by t......

Top Downloads

SharePoint 2013 Feedback Solution - collect feedback from users into a custom feedback list that captures their feedback and exactly where they were in SharePoint when they provided it.

Why CRM Fails - research into CRM failure, best practices, and how to recover from a failing project.

The 60 Second Collaboration Readiness Self-Evaluation - is your team really ready to collaborate?  If they're not, software isn't going to help.  Take the quick self-evaluation in each department to understand how well your culture collaborates.

Identify Your Support Gaps - collaboration and CRM projects often fall short when it comes to supporting users, because support for these projects is different from other projects.  

Disclaimer

Minimize

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

The opinions 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