Changing the look of your Global Navigation (Top Menu Bar)
Changing the look of your top menu navigation bar is rather simple. I will demonstrate here how to accomplish this.
Here is the example below…
In SharePoint Designer 2010, and your site open, go to All Files, then Style Library
From File, create a new CSS file calling it Style…
Open the file style.css that you just created…
Apply the following:
/* Non text menu */
.s4-tn{
padding:0px;
margin:0px;
background-color:#B0C5FF;
color:navy;
}
.s4-tn ul.static{
white-space:nowrap;
}
/* Top Menu */
.s4-tn li.static > .menu-item{
/* [ReplaceColor(themeColor:"Dark2")] */ color:#3b4f65;
white-space:nowrap;
border:1px solid transparent;
padding:4px 10px;
display:inline-block;
height:15px;
vertical-align:middle;
background-color:#B0C5FF;
color:navy;
}
/* Border around the menu sub items */
.s4-tn ul.dynamic{
/* [ReplaceColor(themeColor:"Light2")] */ background-color:white;
/* [ReplaceColor(themeColor:"Dark2-Lighter")] */ border:1px solid #003399;
}
/* Actual Menu Item */
.s4-tn li.dynamic > .menu-item{
display:block;
padding:4px 10px;
white-space:nowrap;
font-weight:normal;
background-color:#B0C5FF;
width:200px;
color:navy;
}
/* Menu Item Hover Over */
.s4-tn li.dynamic > a:hover{
font-weight:normal;
color:navy;
/* [ReplaceColor(themeColor:"Light2-Lighter")] */ background-color:#D9D9D9;
}
/* Hover over top menu */
.s4-tn li.static > a:hover
{
/* [ReplaceColor(themeColor:"Accent1")] */ color:#44aff6;
text-decoration:underline;
color:navy;
}
/* hide arrows for top level items with flyouts */
.menu-horizontal a.dynamic-children span.additional-background,
.menu-horizontal span.dynamic-children span.additional-background{
padding-right:0px;
background-image:none;
}
Within your active master page, make the following change: Remove “sitename”
<SharePoint:CssRegistration name="/Style Library/sitename/style.css" After="corev4.css" runat="server"/>
To
<SharePoint:CssRegistration name="/Style Library/style.css" After="corev4.css" runat="server"/>
This has come in very handy! I am having one problem. My navigation displays fine IE8, but in Firefox the navigation sits off to the right of the page display.
Here is my CSS and page code. I am hoping you can tell me what I am missing so I can get it to display correctly in Firefox.
CSS:
#CPT-topnav {
width:974px;
height:47px;
background:url(‘/Style%20Library/CPTWeb/CPTTopnavBkgd.png’) no-repeat;
}
/* Non text menu */
.s4-tn {
padding:0px;
margin:0px;
background-color:transparent;
color:#005dab;
}
.s4-tn ul.static {
white-space:nowrap;
}
/* Top Menu */
.s4-tn li.static > .menu-item {
/* [ReplaceColor(themeColor:"Dark2")] */ color:#3b4f65;
white-space:nowrap;
border:0px transparent none;
padding:10px 0px;
display:inline-block;
height:47px;
vertical-align:middle;
background-color:transparent;
color:#005dab;
font-family:Arial, sans-serif;
font-size:12px;
font-weight:bold;
width:138px;
text-align:center;
}
/* Border around the menu sub items */
.s4-tn ul.dynamic{
/* [ReplaceColor(themeColor:"Light2")] */ background-color:white;
/* [ReplaceColor(themeColor:"Dark2-Lighter")] */ border:1px solid #003399;
}
/* Actual Menu Item */
.s4-tn li.dynamic > .menu-item{
display:block;
padding:0px;
white-space:nowrap;
background-color:#B0C5FF;
color:#f68933;
}
/* Menu Item Hover Over */
.s4-tn li.dynamic > a:hover{
font-weight:normal;
color:navy;
/* [ReplaceColor(themeColor:"Light2-Lighter")] */ background-color:#D9D9D9;
}
/* Hover over top menu */
.s4-tn li.static > a:hover {
/* [ReplaceColor(themeColor:"Accent1")] */ color:#44aff6;
text-decoration:none;
color:#f68933;
background:transparent url(‘/Style%20Library/CPTWeb/CPTTopnavTabBkgd.png’) no-repeat;
}
/* hide arrows for top level items with flyouts */
.menu-horizontal a.dynamic-children span.additional-background,
.menu-horizontal span.dynamic-children span.additional-background{
padding-right:0px;
background-image:none;
}
Page Code:
<SharePoint:AspMenu
ID="TopNavigationMenuV4"
Runat="server"
EnableViewState="False"
DataSourceID="topSiteMap"
AccessKey="”
UseSimpleRendering=”true”
UseSeparateCss=”false”
Orientation=”Horizontal”
StaticDisplayLevels=”2″
MaximumDynamicDisplayLevels=”2″
SkipLinkText=”"
CssClass=”s4-tn”>
Hi, nice article Bill!
I have just post a blog article about branding the global navigation whit some examples.
http://chrisstahl.wordpress.com/2010/11/04/customizing-sharepoint-2010-global-navigation-with-css-and-jquery-2/
Cheers!
thank you, i have been fighting to get this done. thanks!
This is awesome. Exactly what I need. I applied it and it made my menu the blue color like your screen shots above so i can see that it applied; however the branching or sub levels is not there. Am I missing something? Is there a javascript that I have to apply to this as well to get this affect? This would be an awesome feature to have and make navigation so much easier and less clicks for my customers.
John