This project is read-only.

Change Navigation Bar colour - different background colour on each navigation links

Jul 24, 2013 at 5:49 AM
Edited Jul 24, 2013 at 5:55 AM
I want to change each navigation link to have unique background colour like this:__


__I want the background colour to be different on each navigation links on the Navigation Bar.
Any ideas please?__

This is the SharePoint navigation - so the class looks like this:

.navbar-inverse .brand, .navbar-inverse .nav li.static > a {
    color: #999999;  /* text colour drop down menu children */
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

.navbar-inverse li.static > a {
     color: #eee;  /*text colour drop down menu parent */

.navbar-inverse li.static > a:hover,
.navbar-inverse .nav li.static > a.selected,
.navbar-inverse .nav li.static > a:hover {
    background-color: #7AC143;      /* background color of drop down menu parent*/
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125) inset;
    color: #FFF;                /* text color of drop down menu parent */
    text-decoration: none;

.navbar-inverse .ms-navedit-editLinksText > span > .ms-metadata {
    color: #eee;
.navbar-inverse .ms-navedit-editLinksText,
.navbar-inverse {
    color: #eee;
/*end inverse*/
Jul 24, 2013 at 6:02 PM
Edited Jul 24, 2013 at 6:05 PM

OOTB with SP navigation, this is not directly possible as each link provided in the navigation does not have any unique class or id associated with it. So what else is possible?

You could use JavaScript/jQuery to parse through the top navigation and based on either the link URL or the position (i.e. third link), you could add a particular class to the <li /> tag to provide styling.

Another technique if you are willing to use CSS3 is use the nth-child selector,

You could then use css similar to li.static:nth-child(2) {
Which would set the background for only the 3rd element (starts at 0).

To get this solution to work in IE8-, you could use Selectivizr

One drawback is that if you added more links, or changed the order you would also need to update the css. If you used jQuery based on each navigation node URL then reordering would not be as difficult.

My suggestion would be to use nth-child.

Jul 25, 2013 at 9:10 AM
Thank you so much for your detail explanation Eric!
When you said: Which would set the background for only the 3rd element (starts at 0)
Do you mean li.static is the 3rd Element?
I am able to solve this problem using the example you provided, here is my code: It is perfectly working. BIG THANK YOU!!!! li.static:nth-child(1) {
} li.static:nth-child(2) {
} li.static:nth-child(3) {
} li.static:nth-child(4) {
} li.static:nth-child(5) {
} li.static:nth-child(6) {
Jul 25, 2013 at 3:03 PM
I am glad that helped. Thank you for including the code as I am sure this will help others as well.

nth-child is supposed to be 0 based, meaning that the first child has an index of 0, the second child has an index of 1, etc.

I am glad I was able to help.