Skip to main content

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:

image

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.

image

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.

image

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

image

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:

image

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!

Comments

Emmanuel said…
Hi, good post. I've already done it for a company. But there is a problem: if you add another subtsite to the top nav bar, you'll have to work with your css again because of the ID will change :)

Regards,

Emmanuel Baron
adamdorman said…
Hi Erik,
This is really useful. But I have a problem. Once I have individually styled my elements, I don't see any way to have the item's state differ to show 'you are here'. Do you know of a method to do this?

Thanks,

Adam
Jenny said…
Hi, great post and very easy to follow the instructions. I suppose this doesnt work in SharePoint Foundation version?
Thomas BalkestĂ„hl said…
Great post Erik.
One question for us new to this...
Where do I put the CCS part for 2010? In the masterpage file? If so where in it? and do I only change the simplerendering in the master?

Could you post an example of the css and the master when ready?

Thanks
// Thomas
Erik Swenson said…
Thomas,

There are many ways to reference the CSS I supplied to get the navigation the way that you want. The most simple way would be to include the a style tag within the header section of the master page.

Open Style Tag
"Add the css here"
End style tag

Or you could reference an alternate css file either in the style library within that site collection or on the server itself. See the following post for more info about that.
http://erikswenson.blogspot.com/2010/01/sharepoint-2010-css-references-in.html
armin said…
hi i'm new in sharepoint
i searched everywhere but i couldn't find the css file , and where should i write those codes ?! please help me
Anonymous said…
Hi , can i use IE dom 8 to modify my css files ?!
i made your changes by using IE dom 8 but when i refresh my page all my changes disappear .
please help me out here
sorry for my bad english
Ramesh R said…
hi this is Ram
how can i make my navigateup as shown below style in horzontal can anybody help me

Support / SharePoint / SharePoint Designer / SharePoint Designer 2007 Help and How-to / Page layouts and publishing sites

thanks
Ramesh R said…
how to create my navigate up in horizontal view instead of Treeview in sharepoint 2010 can any body help me

Support / SharePoint / SharePoint Designer / SharePoint Designer 2007 Help and How-to / Page layouts and publishing sites

Thanks in advance
Anonymous said…
Great article, really useful to see how easily you can apply styles to individual nav items. Thanks
Brian Marvin said…
This worked amazingly well for me. Thank you very much for posting.
Maknanimous said…
Hi,
I have used your solution above to individually style my top navigation items, and it works very well. However I have run into a bit of a problem. I would like to add a hover delay to my top navigation dropdown but I am struggling to find a way to do this. Any assistance would be greatly appreciated.
kashkumar said…
Hi Eric,

Thanks for the article. I have got 1 question if you could answer that would be great. How to style the drop down items based on their parent id's? For example if the background colour of the home tab in the top level navigation is green and all the drop down options under home will have green background and if the test tab in the top level navigation has red background colour then all the drop down options under test tab should have red background. Please help.
kashkumar said…
Hi Eric, I hope you could answer this. This method works very well but the problem is application pages don't show the top navigation tabs in different colours instead they show the default tabs with no branding. Can you please explain why or do you have the solution? Thanks again, it would be great if you could help on this.
kashkumar said…
Hi Eric, I hope you could answer this. This method works very well but the problem is application pages don't show the top navigation tabs in different colours instead they show the default tabs with no branding. Can you please explain why or do you have the solution? Thanks again, it would be great if you could help on this.
kashkumar said…
Hi Eric, I hope you could answer this. This method works very well but the problem is application pages don't show the top navigation tabs in different colours instead they show the default tabs with no branding. Can you please explain why or do you have the solution? Thanks again, it would be great if you could help on this.
kashkumar said…
Hi Eric, I hope you could answer this. This method works very well but the problem is application pages don't show the top navigation tabs in different colours instead they show the default tabs with no branding. Can you please explain why or do you have the solution? Thanks again, it would be great if you could help on this.
Sam Daniel said…
How to apply this concept in SharePoint 2013? Thanks in advance.
Bisi Ade said…
Dear Erik,

How can I do same for submenu items.

Thank you,

Bisi
This works great, except is there a way to customize the coloured tabs depending on permissions?

For example, I have 5 tabs in the global navigation. User A has permissions to see all 5 tabs. User B only have permissions to see 3 of the tabs.

For example...The first tab's colour should be red, and the 2nd tab's colour should be yellow.
User A sees the first tab as red, as it should be.
Since User B doesn't have permissions to see the first tab, when User B logs in to Sharepoint site, the 2nd tab is the first tab they see and its showing to them as red but it should be yellow.

Is there a way in CSS to colour the links depending on the Name of the link , instead of the ID?

Or do you know a way to check permissions in the master page in sharepoint designer, then depending upon the user's permissions, it would use a different CSS page?

thank you!!
Can anybody happened to try this in 2013 ? if so can someone help me with the steps ?

Popular posts from this blog

How To: Hide Left Side Navigation on Home Page

I was recently asked: "How can I hide the side nav bar on the main homepage layout ?? I want to be able to use the side NAV with in the team site etc etc, but I don't want it on the front page.. " There are a couple of ways to do this in SharePoint 2010. If you are using a non-publishing site you can add a Content Editor Web Part to the page and add the following to the HTML Source.
<Style>
body #s4-leftpanel
{
display: none;
}
.s4-ca
{
margin-left: 0px;
}
</style>
Basically the CSS above hides the left navigation Div, and then sets the content area to not have a left margin. Once you are done, simply modify the web part and hide it on the page. If you are using a publishing site for your homepage simply add the same styles specified above to a custom page layout. That way if you have a need for other pages that do not need the left side navigation you can re-use the page layout.

Small Calendar for SharePoint 2010 & 2013

First off I would like to apologize for the lack of posts. I have been really busy with my new role as the UX Design lead within Slalom Consulting Boston. I will share more about that in another post. In a previous post Create Really Small Calendar I showcased how to do this for SharePoint 2007. However the 2010 and 2013 calendar views have changed and therefore we cannot use the same method or CSS as 2007.SharePoint 2010 Small Calendar:
SharePoint 2013 Small Calendar:
See video below for a video walk through on how to create a small calendar for SharePoint 2010 and & SharePoint 2013 with just CSS.Per the video above here is the code that I referenced:2010 CSS link reference in Master Page:
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/smallcalendar.css %>" After="corev4.css" runat="server"/>2010 CSS:
/**** Small Calendar ***/
.ms-acal-item{height: 10px !important;}
.ms-acal-sdiv,
.ms-acal-mdiv,
.ms-…

SharePoint 2010 Base CSS Classes

This will be the first of many SharePoint 2010 posts. I will be focusing on a few of the main CSS classes used for SharePoint 2010 Public Beta. As the product becomes more final there might be some changes to the class names but I will be sure to create a new post if that happens. This will be quite a lengthy but it should be helpful. The default CSS given below are just highlights of the full CSS attributes for that class.I will be using a basic team site as my base for the screenshots. Here is a basic structure of the main areas that I will cover.Ribbon RowTable Row Left Site Actions Navigate Up Edit Tab List Browse Page Table Row Right Give Feedback Welcome Menu WorkspaceBody Container Title Row Title Title Logo Title Text / BreadcrumbPage DescriptionSocial Data SeparatorI like It Tags/Notes Top Header 2/Top Links li Static-Selected li Static SearchHelpStatus Bar Container Main A…