Branding SharePoint 2010 Top Navigation Dropdown Menu Bar
By default SharePoint 2010 Top Navigation menu looks like the below screen without 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:
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:
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
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
This is perfect, works cut n paste – spoilt only by the misspelling of navigation…
Thx
Hi Salaudeen,
Excellent work !! Where do i get the images that you have used ?
Its a ootb Image from 14 hive.