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

EB 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
J.O Lind 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.
Anonymous 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.
Anonymous 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.
Anonymous 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.
Anonymous 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.
Anonymous 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.
samdany10 said…
How to apply this concept in SharePoint 2013? Thanks in advance.
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!!

Popular posts from this blog

How To: Create Hyperlink to Modal Pop-Up Form

I was asked by a client recently if there was a way to create a hyperlink to a New Item Form anywhere within a site but still get the rich experience of the Modal pop-up window that grays out the background. (Note this is for SharePoint 2010 Only…) I basically took the code directly from the “Add new item” and the “Add Document” link within the list view. What this allows you to do is simply add in the following code to any content editor web part, Master page, or Page Layout in any site collection and display the form to be filled out. The user will get the nice experience of the modal window and not have to navigate away from their current page. This could be used for example a feedback form that is included in the master page so whenever someone wants to give feedback it is always going back to a central list. The only that is required for you to know is the List ID and the site name. Full Code For a List Item: <a onclick="javascript:NewItem2(event, &quot

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 Row Table Row Left Site Actions Navigate Up Edit Tab List Browse Page Table Row Right Give Feedback Welcome Menu Workspace Body Container Title Row Title

SharePoint 2013 Responsive Table Columns

I have been wanting to write this one for a while now. It is really amazing how UX is really finding is way into everything that we use and interact with. From Custom applications both mobile and on a desktop to document management or large data visualizations. There is always room for better usability and new concepts. SharePoint lists and library functionality really has not changed much for the past 10 years... I remember back in 2003 when I saw the same table/grid based views of documents and list items that exists in SharePoint 2013. But now we can look at them in a whole new way! In this video blog you will see how to create a responsive CSS table so that when the browser size is reduced it will hide specific columns. However hiding data is not always the right thing to do. What if a user needed those columns to filter on or to use for comparison to another document? Well that is where the custom jQuery Column chooser comes in. It allows you to see what columns are displ