Style Individual Navigation Items for 2007 & 2010

Here is a simple yet effective way to stylize individual top navigation items for SharePoint 2007 & 2010 just using CSS. SharePoint 2010 will need a slight modification to the master page but the same effect can be achieved. See bottom of post for 2010 implementation.

To start off with lets review how this can be accomplished for 2007. SharePoint 2007 provides a unique ID for each note in the navigation.

1. 1st Tab: Dedicated as your default Home or root node
• ID: zz1_TopNavigationMenun0
2. 2nd Tab: This is the first child node from the root
• ID: zz1_TopNavigationMenun1
3. 3rd Tab: This is the second child node from the root
• ID: zz1_TopNavigationMenun2
4. 4th Tab: This is the third child node from the root
• ID: zz1_TopNavigationMenun3 

See the pattern… It keeps going and going. Here is what it looks like from the IE DOM Explorer in IE8:

So you might ask well what can I do with this unique ID? Well here is a quick sample of what you can do. Its not pretty but it shows off that you can have a custom Icon, background color, font, etc. for each node in the navigation.

Here is the CSS and OOTB Icon references that I used to create the above design. So how does it work? Basically it combines the trigger of the unique ID and attaches it to the class of “ms-topnav a”. You will notice that I had to do a funky bit of css to fill in the background behind the arrow for news.

.ms-topnav{
border: none;
background-color: transparent;
background-image: none;
font-weight: bold;
}
#zz1_TopNavigationMenun0 .ms-topnav a{
background-image: url(/_layouts/images/newshomepage.png);
background-repeat: no-repeat;
background-position: -40px -3px;
background-color: #006699;
border: 1px #006699 solid !important;
padding:18px 20px 0px 80px;
height: 54px;
color: #FFF;
}
#zz1_TopNavigationMenun1 .ms-topnav a{
background-image: url(/_layouts/images/PLICON.PNG);
background-repeat: no-repeat;
background-position: -40px -3px;
background-color: #FF9933;
border: 1px #FF9933 solid !important;
padding:18px 20px 0px 80px;
height: 54px;
color: #FFF;
}
#zz1_TopNavigationMenun2 .ms-topnav a{
background-image: url(/_layouts/images/ANNOUNCE.PNG);
background-repeat: no-repeat;
background-position: -40px -3px;
background-color: #336633;
border: 1px #336633 solid !important;
padding:18px 20px 0px 80px;
height: 54px;
color: #FFF;
}
#zz1_TopNavigationMenun2 .ms-topnav td{
background-color: #336633;
}
#zz1_TopNavigationMenun3 .ms-topnav a{
background-image: url(/_layouts/images/ReportCenter.png);
background-repeat: no-repeat;
background-position: -40px -3px;
background-color: #990000;
border: 1px #990000 solid !important;
padding:18px 20px 0px 80px;
height: 54px;
color: #FFF;
}
#zz1_TopNavigationMenun4 .ms-topnav a{
background-image: url(/_layouts/images/SMT_LARGE.PNG);
background-repeat: no-repeat;
background-position: -40px -3px;
background-color: #660066;
border: 1px #660066 solid !important;
padding:18px 20px 0px 80px;
height: 54px;
color: #FFF;
}
#zz1_TopNavigationMenun5 .ms-topnav a{
background-image: url(/_layouts/images/categories.png);
background-repeat: no-repeat;
background-position: -40px -3px;
background-color: #999;
border: 1px #999 solid !important;
padding:18px 20px 0px 80px;
height: 54px;
color: #FFF;
}

So how do you do this for SharePoint 2010…

Well first you will need to modify the master page and do a search for “UseSimpleRendering="true"”. This basically tells SharePoint to render the navigation using a clean unordered list <UL> <LI> format.

Since this is so clean, it does not have any unique ID’s attached to it like it did in SharePoint 2007.

So if you change it to false: UseSimpleRendering="false" you can clearly see that each node now has a unique ID:

So if we simply take the same approach for 2007 we can get similar results.  You will notice the only difference in the ID’s from 2007 to 2010 is that they put in a “V4” after the word “Menu” and before the “n#”

1. 2007 ID: zz1_TopNavigationMenun0
2. 2010 ID: zz1_TopNavigationMenuV4n0

You can also remove the “ms-topnav” since it is not needed. You should end up with something like this:

Below is the CSS that I used to achieve the design above for SharePoint 2010. Remember you need to make that modification to the master page noted above to get this to work. Also notice that I kept the “a” reference at the end of each ID.

#s4-topheader2{
border: none;
background-color: transparent;
background-image: none;
font-weight: bold;
height: 54px;
padding-bottom: 5px;
}
#zz1_TopNavigationMenuV4n0 a{
background-image: url(/_layouts/images/newshomepage.png);
background-repeat: no-repeat;
background-position: -40px -3px;
background-color: #006699;
border: 1px #006699 solid !important;
padding:18px 20px 18px 80px;
color: #FFF;
}
#zz1_TopNavigationMenuV4n1 a{
background-image: url(/_layouts/images/PLICON.PNG);
background-repeat: no-repeat;
background-position: -40px -3px;
background-color: #FF9933;
border: 1px #FF9933 solid !important;
padding:18px 20px 18px 80px;
color: #FFF;
}
#zz1_TopNavigationMenuV4n2 a{
background-image: url(/_layouts/images/ANNOUNCE.PNG);
background-repeat: no-repeat;
background-position: -40px -3px;
background-color: #336633;
border: 1px #336633 solid !important;
padding:18px 20px 18px 80px;
color: #FFF;
}
#zz1_TopNavigationMenuV4n3 a{
background-image: url(/_layouts/images/ReportCenter.png);
background-repeat: no-repeat;
background-position: -40px -3px;
background-color: #990000;
border: 1px #990000 solid !important;
padding:18px 20px 18px 80px;
color: #FFF;
}
#zz1_TopNavigationMenuV4n4 a{
background-image: url(/_layouts/images/SMT_LARGE.PNG);
background-repeat: no-repeat;
background-position: -40px -3px;
background-color: #660066;
border: 1px #660066 solid !important;
padding:18px 20px 18px 80px;
color: #FFF;
}
#zz1_TopNavigationMenuV4n5 a{
background-image: url(/_layouts/images/categories.png);
background-repeat: no-repeat;
background-position: -40px -3px;
background-color: #999;
border: 1px #999 solid !important;
padding:18px 20px 18px 80px;
color: #FFF;
}

Enjoy!