dynamically change Navbar Color

You have to use one of Following

 

1)Cookie Storage

2)Local Storage

3)Session Storage

 

Add a class or property to the body that identifies the page. HTML5's data-* properties are just the thing for this. If you are using PHP, it might look like this:

 

 

Then, in your CSS, you have some of the following CSS rules:

 

body[data-page-name="home"] ul.nav { background-color: #111 }

body[data-page-name="about-us"] ul.nav { background-color: #47F514; }

body[data-page-name="campaigns"] ul.nav { background-color: #F2720A; }

body[data-page-name="news"] ul.nav { background-color: #0A76F2; }

body[data-page-name="donate"] ul.nav { background-color: #F7A116; }

 

 

You want to pass info along to the next page, and then, when loading the page, retrieve that info. You can pass info between pages three ways: localStorage and cookies.

 

 

Firstly, download this. It is a jQuery plugin to simplify your life when you want to use cookies.

This is how a setter looks: (assigning a value to a new variable)

 

$.cookie('key','value');

 

This is how a getter looks: (retrieving the value of a variable)

 

$.cookie('key');

 

 

localStorage is a new feature in HTML5 as an alternative to cookies. You have basic key-value pairs, similar to Redis.

 

Setters look like this:

 

localStorage.setItem('key','value');

 

And getters look like this:

 

localStorage.getItem('key'); // returns "value"

 

Just so you know, you can also use sessionStorage. Usage is the same, but the client doesn't retain the data on the next visit

 

 

Now, sessionStorage/localStorage would be the preferred approach if the client's browser supports it. So you should do a check before caching and info to know what to do. Bringing it all together, your code might look something like this: