dynamically change Navbar Color

Question

Navbar color changing in one page but changed color not displaying in all pages only default color is displaying in all pages. Navbar is in master page only. we are using dropdownlist option to change the color. Default page after changing the color ERROR: when we redirecting to another page navbar color changed to default color(purple) As Per the requirement the navbar color should be same as the drop-down menu selected color Give any solutions or link to fix this issues Thanks in Advance

Jenith Thakkar · Answer

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; } With Javascript (fun) 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. 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 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 Tying it together 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: $( function () { // Check for background color if ( typeof sessionStorage !== "undefined" ) { var menuBackgroundColor = sessionStorage.getItem( 'menuBackgroundColor' ); sessionStorage.removeItem( 'menuBackgroundColor' ); } else { var menuBackgroundColor = $.cookie( 'menuBackgroundColor' ); $.removeCookie( 'menuBackgroundColor' ) } //background colors setup for each nav menu var colors_array_by_class = { "home" : "#111111" , "about-us" : "#47F514" , "campaigns" : "#F2720A" , "news" : "#0A76F2" , "donate" : "#F7A116" }; // Click event $( "ul.nav" ).on( 'click' , 'li > a' , function (){ // Cache new menu color for later use var newMenuColor = colors_array_by_class[ $( this ).children( "i" ).attr( 'class' ) ]; // Visual change $( "ul.nav > li > a" ).css( "background-color" , "#0E0E0E" ); $( this ).css( "background-color" , newMenuColor ); if ( typeof sessionStorage !== "undefined" ) localStorage.setItem( 'menuBackgroundColor' , newMenuColor ); else $.cookie( 'menuBackgroundColor' , newMenuColor ); }); })();

dynamically change Navbar Color

Answers (1)