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:__


Image

__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:
/*inverse*/


.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 .nav.ms-core-listMenu-horizontalBox li.static > a {
     color: #eee;  /*text colour drop down menu parent */
     
    
}

.navbar-inverse .nav.ms-core-listMenu-horizontalBox 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 .nav.ms-core-listMenu-horizontalBox .ms-navedit-editLinksText > span > .ms-metadata {
    color: #eee;
    
}
.navbar-inverse .nav.ms-core-listMenu-horizontalBox .ms-navedit-editLinksText,
.navbar-inverse .nav.ms-core-listMenu-horizontalBox a.static.ms-navedit-dropNode,
.navbar-inverse .nav.ms-core-listMenu-horizontalBox div.ms-navedit-hiddenAppendArea {
    color: #eee;
}
/*end inverse*/
Jul 24, 2013 at 6:02 PM
Edited Jul 24, 2013 at 6:05 PM
Hi,

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, http://www.w3schools.com/cssref/sel_nth-child.asp

You could then use css similar to
.nav.ms-core-listMenu-horizontalBox li.static:nth-child(2) {
 background:#ff0000;
} 
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 http://selectivizr.com/.

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.

Eric
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!!!!
.nav.ms-core-listMenu-horizontalBox li.static:nth-child(1) {
 background:#F00001;
} 
.nav.ms-core-listMenu-horizontalBox li.static:nth-child(2) {
 background:#F07A22;
} 

.nav.ms-core-listMenu-horizontalBox li.static:nth-child(3) {
 background:#3EB649;
} 
.nav.ms-core-listMenu-horizontalBox li.static:nth-child(4) {
 background:#0E783D;
} 
.nav.ms-core-listMenu-horizontalBox li.static:nth-child(5) {
 background:#2B59A8;
} 

.nav.ms-core-listMenu-horizontalBox li.static:nth-child(6) {
 background:#763695;
} 
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.

Eric