Friday, October 31, 2014

Branding the SharePoint 2013 Global Navigation

Posted in [SharePoint], [Technical] By Kyle Wright @ 9/30/2013

In a previous post I described how to use the Managed Navigation functionality that is new in SharePoint 2013 to create a global navigation based on a Managed Metadata term set. This has a lot of benefits in my mind, so check out that post for details. At the end of that post I gave you a preview of a completely branded top navigation bar, so this post will go into the details of how to accomplish that branding.

There are a bit of tweaks you would have to make to the CSS if you aren’t using the Managed Navigation functionality, but this will get you really close and you can tweak it from there. The top navigation code is rendered differently if you use Managed Navigation. Thanks Microsoft!

This is what we are going to produce. I would have liked a bit more contrast, but this design was provided by a client’s design team.

image

In my master page, I am wrapping the standard navigation and search snippets that get output from the snippet generator with this code.  I have my search box nested inside the same holder as my navigation so they all appear in-line.

   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 that I am using to generate this, then explain a bit of it below.

 

   1:  #g-navigation-bar {
   2:      background-image:url(../images/sprite.png);
   3:      background-repeat:no-repeat
   4:  }
   5:  #navigation-bar{
   6:      height:25px;
   7:      background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 100%); /* FF3.6+ */
   8:      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f3f3f3)); /* Chrome,Safari4+ */
   9:      background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 100%); /* Chrome10+,Safari5.1+ */
  10:      background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 100%); /* Opera11.10+ */
  11:      background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 100%); /* IE10+ */
  12:      -moz-box-shadow:-1px -1px 0 #FFF inset, 0 1px 3px rgba(0,0,0,0.1);
  13:      -webkit-box-shadow:-1px -1px 0 #FFF inset, 0 1px 3px rgba(0,0,0,0.1);
  14:      box-shadow:-1px -1px 0 #FFF inset, 0 1px 3px rgba(0,0,0,0.1);
  15:  }
  16:  /*Disable the inline link editing menu*/
  17:  .ms-core-listMenu-horizontalBox > .ms-core-listMenu-root > .ms-listMenu-editLink {display:none;}
  18:  .ms-core-listMenu-horizontalBox ul, .ms-core-listMenu-horizontalBox li{display:block;}
  19:   
  20:  /*Level1*/
  21:  .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item{margin-right:0px !important;}
  22:  .ms-navedit-editLinksText > span > .ms-metadata{color:#ffffff !important;}
  23:  .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root {position:relative;z-index:10;padding-left:0px;}
  24:  .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root li {font-weight:bold;float:left;position:relative;padding:0px;margin:0px;}
  25:  .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root > li:first-child > a{color:#FFF !important;background-position:0px -95px;padding-left:30px;}
  26:  .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root > li:first-child {background:url(../images/sprite-menu.png) repeat-x left bottom #872434;-webkit-border-top-left-radius: 5px;-webkit-border-bottom-left-radius: 5px;-moz-border-radius-topleft: 5px;-moz-border-radius-bottomleft: 5px;border-top-left-radius: 5px;border-bottom-left-radius: 5px;}
  27:  .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root > li {padding:13px 15px 10px;color:#787878;position:relative;z-index:10}
  28:  .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root li a, .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root li a.selected {color:#787878}
  29:  .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root li a.parent {padding-right:25px;position:relative}
  30:  .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root li:hover {background:url(../images/sprite-menu.png) repeat-x left top #872434;}
  31:  .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root > li:hover > a {text-decoration:none;color:#FFF !important;}
  32:  .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root > li.dynamic-children:hover > .ms-core-listMenu-item{color:#ffffff !important;}
  33:   
  34:  /*Level 2*/
  35:  .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root li:hover ul {display: block;}
  36:  .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root li:hover ul ul {display: none;}
  37:  .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root ul {width:200px !important;position:absolute;top:100%;margin-top:4px;left:0;display:none;padding:0px;list-style:none;}
  38:  .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root ul li {background:#fbfbfb;border-bottom:1px solid #f2f2f2;border-top:1px solid #fff;float:none;clear:both;margin-right:0;font-weight:normal;border-left:5px solid #fbfbfb;}
  39:  .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root ul li:first-child {border-top:none}
  40:  .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root ul li a {padding:4px 4px;}
  41:  .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root li ul li a span {background-position:0 -9px;top:10px;}
  42:  .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root ul li:hover {border-left:5px solid #872434;background:#FFF;color:#787878}
  43:  .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root li ul li:hover {background:#FFF;border-left:5px solid #872434;}
  44:  .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root li ul li:hover a {color:#787878}
  45:   
  46:  /*Level 3+*/
  47:  .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root ul li ul {left:0;top:0;padding-left:0px;display:none;margin:-2px 0 0 -7px;}
  48:  .ms-core-listMenu-horizontalBox ul.ms-core-listMenu-root li ul li:hover ul {display: block;}

Lines 1-15 set up the background for the main navigation bar.  The top bar is 40px high.

Lines 20-32 style the main first level items, lines 34-44 style the first fly out level and lines 46-48 handle the second + flyout levels.

Lines 16-18 hide the edit icon that allows you to inline edit the Managed Navigation items. We didn’t need this for the project and styling the edit mode items turned out to be way more trouble than it was going to be worth.

Lines 25-26 style the first navigation item. In the clients proposed design, this would always be a link to the home page and be called Home (hence the icon).

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.

There is a lot going on here, but let me know in the comments if you have any questions.

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

, , , , ,

Comments

Got something to say? Join the discussion »
    Posted by Kyle Wright on 5/7/2014
    @Bob, thanks for your interest in the post. Unfortunately security trimming is not supported with managed navigation. This is a pretty big oversight in my mind, but I guess the thinking was that this was for more global applications where there wouldn't be much in the way of security control.

    @Christian, there are quite a few changes that would need to be made. There are different classes that need to be called. I'll try to put a post together in the next few days that will update this for standard navigation. I'll post back here with that update, but keep an eye out on the blog.
    Posted by Bob Elander on 5/6/2014
    This looks good, but how can we get security trimming on the menu items when using the managed navigation functionality.

    Btw thanks for sharing.
    Posted by Christian Poulsen on 4/24/2014
    Hi Kyle

    I think this menu i very nice, but I can't get it to work with the standard (non metadata based) menu. Could you give me any hints on how to get further with that.

    Best regards
    Christian
    Posted by Kyle Wright on 2/4/2014
    @Aubrey, I did this for a client, so I can't post the artwork for download unfortunately. sprite-menu.png is 1px wide and 80px high. The top 40px are for the gray color in the example above and the bottom 40px are for the red color in the example. The other house image doesn't really need to be a sprite, you can just load any icon there and adjust the padding as needed, or take it out all together.

    @Yoshi, I'm not exactly sure what is going on, but this was built specifically with the managed metadata in mind not structural. Structural navigation renders differently. SharePoint renders the name of the site in the structural navigation which sounds like your issue. You could try something like .ms-core-listMenu-horizontalBox > .ms-core-listMenu-root li:first-child {display:none;} to hide the first element of the navigation bar. That would hide the site title navigation element. You could then just create a new navigation item and point that to your root site if you still want to have that link there.
    Posted by HQQH on 1/28/2014
    I've implemented this navigation, but can only get the active hover area to be the text (a tag) and not the

    If I increase the padding on the to fill the the level 2 won't appear. It seems that the only way to reset the level 1 navigation to get the level 2 to appear is to hover over the again - but difficult if I'm trying to get the active hover area to be the entire
    Posted by Kyle Wright on 11/20/2013
    Aubrey, the sprite menu image is 80px by 1px, so the red is 40px and the gray is 40px. This then gets repeated horizontally along the nav bar. I apologize for leaving out the styling of the gray bar. I going to update the post now to include that along with the code in my master page that is wrapping the master page.
    Posted by Aubrey on 11/20/2013
    Kyle, Thanks

    If I could get the sizes that would be great. I could create my own. Do you have the URL for the site so I can use for an example ? I can look for the sizes of the images.

    I'm looking for the code for the background of the nav bar ? the gray part ? not sure i'm seeing it. sorry for my confusion. I just really like this nav bar and think it would work good on the site i'm working on if I can get it to work?
    Posted by Kyle Wright on 11/20/2013
    @Yoshi, the structural navigation gets rendered differently and needs different CSS. I'll try to post an update to this post with similar code to render the structural navigation.
    Posted by Kyle Wright on 11/20/2013
    @Aubrey, unfortunately I can't share the images that you mention, they were for a client project. You should be able to either create your own in Photoshop or similar, or find a web site design you like on a web template site and lift their images.
    Posted by Yoshi on 11/19/2013
    Hi Kyle

    I am using Structural navigation in my site and for my Global Navigation section I have 2 headings (Home, Administration). When I use the styles above, I get the name of the site and then under that I get Home and Administration as children. But this is not how I want things to look. I want all headings to show up one next to another and not as children. How do I do this?
    Thanks
    Yoshi
    Posted by Aubrey on 11/19/2013
    I was going to cut and past this code in my Dev Site SP2013 where can I download the images sprite-menu.png and sprite.png

    thanks you

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