This project is read-only.

Side Navigation background colour change based on what was clicked on Top Navigation

Aug 1, 2013 at 2:20 AM
Edited Aug 5, 2013 at 9:19 AM
Hi Eric,

I need to change the background colour of the heading on the Side Navigation based on what was clicked on the Top Navigation.
Image

If I clicked the second tab (Pages) on the top navigation, the heading background colour on side navigation will change to red.
If I clicked the last tab (Contact) on the top navigation, the heading background colour on side navigation will change to blue.


I am using these codes for side navigation :

/*left side bar */
.ms-core-listMenu-verticalBox li.static > ul.static > li.static > .ms-core-listMenu-item {

background-image: url("/_layouts/15/images/menu-right.gif?rev=23");
/*background-image: url("/_catalogs/masterpage/bootstrap/img/right-arrow.gif");*/
background-repeat: no-repeat;
background-position: 20px 10px; 
padding-left: 40px;
font-size: 1em;
background-origin:padding-box;
font-weight:normal;
}


.ms-core-listMenu-verticalBox > .ms-core-listMenu-root > li > .ms-core-listMenu-item {
    font-family:Helvetica Neue,Helvetica,Arial,sans-serif; 
    font-size: 1em; 
    font-weight:bold;
    vertical-align: middle; display: block;
}

.ms-core-listMenu-verticalBox > .ms-core-listMenu-root > li > .ms-core-listMenuEdit {
    font-family:Helvetica Neue,Helvetica,Arial,sans-serif; 
    font-size: 1em; 
    vertical-align: middle; display: block;
}
.ms-core-listMenu-heading {
    font-family:Helvetica Neue,Helvetica,Arial,sans-serif; 
    font-size: 1em; 
    vertical-align: middle; display: block;
}
.ms-tv-header {
    font-family:Helvetica Neue,Helvetica,Arial,sans-serif; 
    font-size: 1em; 
    vertical-align: middle; display: block;
}
Please give me some ideas. THANK YOU!!!