Wednesday, April 3, 2013

Branding SharePoint 2010 Top Navigation Dropdown Menu Bar

By default SharePoint 2010 Top Navigation menu looks like the below screen without branding.

sharepoint 2010 top navigation branding
The Top Navigation Menu is the primary object in SharePoint user interface. We can customize top navigation menu's look and feel by overriding CSS styles. Here, I'm Sharing the CSS code and screens for reference, from my recent project.

SharePoint 2010 Top Navigation & Flyout Menu CSS Style:
/*** Top Navigaion Global Menu Container ***/
 .s4-tn
{
      padding: 0px;
      margin: 0px;
      font-family: 'Calibri' !important;
      font-size: 11pt !important;
      padding-left: 10px;
}

/*** Top Navigaion Static Menu Style ***/
.s4-tn li.static > .menu-item
{
      color: #5A9A18;
      border: 1px solid transparent;
      padding: 4px 10px;
      line-height: 25px;
      height: 25px;
}

/*** Top Navigaion Static Menu Hover ***/
.s4-tn li.static > a:hover
{
      background: url("/_layouts/Images/selbg.png") repeat-x left top;
      background-color: #529610;
      color: #fff;
      text-decoration: none;
}

/*** Top Navigaion Static Menu Selected ***/
.s4-toplinks .s4-tn a.selected
{
      background: url("/_layouts/Images/selbg.png") repeat-x left top;
      background-color: #529610;
      color: #fff;
      text-decoration: none;
      border: 1px transparent solid;
      padding-right: 10px;
      padding-left: 10px;
      margin: 0px;
      border-color: #529610;
}

/*** Top Navigation Flyover/Dynamic Menu Container ***/
.s4-tn ul.dynamic {
 background-color: white;
 border: 1px solid #000;
}

/*** Top Navigation Sub-Menu Items Padding ***/
.s4-tn li.dynamic > .menu-item {
 padding: 10px 20px 10px 20px;
}

/***  Top Navigation Sub-Menu Items (HyperLinks) CSS Style ***/
.s4-tn li.dynamic > a {
 font-weight: normal;
 color: #529610;
}
/*** Top Navigation Sub-Menu Items (HyperLinks) Hover Style ***/
.s4-tn li.dynamic > a:hover {
 font-weight: bold;
 background-color: #AECE8F;
 color: #FFF;
}
Typically, Through CSS styles, we set background color, font, border, etc to apply branding in SharePoint 2010 top navigation menu.

Output of the above CSS:
sharepoint 2010 branding top menu
sharepoint 2010 change menu style
Not just colors, even images can be set in SharePoint 2010 horizontal menu branding customizations.

CSS Style for Branded SharePoint 2010 Top Navigation Menu (a bit variant from above):

/*** Top Navigaion Global Menu Container ***/
 .s4-tn
{
      padding: 0px;
      margin: 0px;
      font-family: 'Calibri' !important;
      font-size: 11pt !important;
      padding-left: 10px;
}

/*** Top Navigaion Static Menu Style ***/
.s4-tn li.static > .menu-item
{
      color: #21374C;
      border: 1px solid #93C2EC;
      padding: 4px 10px;
      line-height: 25px;
      height: 25px;
      background: url("/_layouts/Images/selbg.png") repeat-x left top;
      background-color:#47A4D3;
}

/*** Top Navigaion Static Menu Hover ***/
.s4-tn li.static > a:hover
{
      background: url("/_layouts/Images/selbg.png") repeat-x left top;
      background-color: #0A85C4;
      color: #fff;
      text-decoration: none;
}

/*** Top Navigaion Static Menu Selected ***/
.s4-toplinks .s4-tn a.selected
{
      background: url("/_layouts/Images/selbg.png") repeat-x left top; /* Glass Effect Shade Image */
      background-color: #0A85C4;
      color: #fff;
      text-decoration: none;
      border: 1px transparent solid;
      padding-right: 10px;
      padding-left: 10px;
      margin: 0px;
      border-color: #134072;
}

/*** Top Navigation Flyover/Dynamic Menu Container ***/
.s4-tn ul.dynamic {
 background-color: #D5E4F2;
 border: 1px solid #000;
}

/*** Top Navigation Sub-Menu Items Padding ***/
.s4-tn li.dynamic > .menu-item {
 padding: 10px 20px 10px 20px;
}

/***  Top Navigation Sub-Menu Items (HyperLinks) CSS Style ***/
.s4-tn li.dynamic > a {
 font-weight: normal;
 color: #0189FA;
}
/*** Top Navigation Sub-Menu Items (HyperLinks) Hover Style ***/
.s4-tn li.dynamic > a:hover {
 font-weight: bold;
 background-color: #61CBFD;
 color: #FFF;
}
and the output:
sharepoint 2010 top menu navigation css
The custom CSS can be placed in a Style Sheet and Linked in Master page, or it can be uploaded to SharePoint library/file system and set as Alternate CSS Style sheet under site settings.

MSDN Reference: http://msdn.microsoft.com/en-us/library/gg430141%28v=office.14%29.aspx



You might also like:
SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Document SharePoint Farm
Automatically generate SharePoint documentation.
*Sponsored


Check out these SharePoint products:

3 comments :

  1. Hi Salaudeen,

    Excellent work !! Where do i get the images that you have used ?

    ReplyDelete
  2. This is perfect, works cut n paste - spoilt only by the misspelling of navigation...

    Thx

    ReplyDelete

Please Login and comment to get your questions answered!

You might also like:

Related Posts Plugin for WordPress, Blogger...