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.