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: https://msdn.microsoft.com/en-us/library/gg430141%28v=office.14%29.aspx

Salaudeen Rajack

Salaudeen Rajack - Information Technology Expert with Two-decades of hands-on experience, specializing in SharePoint, PowerShell, Microsoft 365, and related products. He has held various positions including SharePoint Architect, Administrator, Developer and consultant, has helped many organizations to implement and optimize SharePoint solutions. Known for his deep technical expertise, He's passionate about sharing the knowledge and insights to help others, through the real-world articles!

4 thoughts on “Branding SharePoint 2010 Top Navigation Dropdown Menu Bar

  • Can this be used for 2013/2016 as well. if not what changes do we need to do, if you have any snippet for 2013 could you post it over. Thanks

    Reply
  • This is perfect, works cut n paste – spoilt only by the misspelling of navigation…

    Thx

    Reply
  • Hi Salaudeen,

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

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *