# Change color of header (nav-bar) on navigating to a new state on the App (V.beta14) **URL:** \ **Category:** ionic-v1\ **Created:** [December 29, 2014, 4:44pm UTC](https://forum.ionicframework.com/t/change-color-of-header-nav-bar-on-navigating-to-a-new-state-on-the-app-v-beta14/14857 "2014-12-29T16:44:51Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![naveenkarippai1](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/naveenkarippai1/32/91429_2.png) [@naveenkarippai1](https://forum.ionicframework.com/u/naveenkarippai1)\ **Post date:** [December 29, 2014, 4:44pm UTC](https://forum.ionicframework.com/t/change-color-of-header-nav-bar-on-navigating-to-a-new-state-on-the-app-v-beta14/14857/1 "2014-12-29T16:44:51Z")
Hi, How to **_change the color of header(nav-bar) on navigating to a new state_**? > **[Side Menu and Navigation: 1.0.0-beta.2](https://codepen.io/calendee/pen/rceyD)** > > Demo showing how to wire up side menus along with navigation within Ionic. Forked from Ionic's Pen This method in the codepen **doesn’t work anymore on Beta14**. Is there a workaround on beta14? Thanks in advance!! ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [December 29, 2014, 10:00pm UTC](https://forum.ionicframework.com/t/change-color-of-header-nav-bar-on-navigating-to-a-new-state-on-the-app-v-beta14/14857/2 "2014-12-29T22:00:35Z")
So this old method won’t work since we’re doing some complex work to make the nav-bars instantly available. So a directive would be needed to work with beta 14. Another option would be to use a separate nav-bar for each ion-view ---
**Author:** ![naveenkarippai1](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/naveenkarippai1/32/91429_2.png) [@naveenkarippai1](https://forum.ionicframework.com/u/naveenkarippai1)\ **Post date:** [December 29, 2014, 10:10pm UTC](https://forum.ionicframework.com/t/change-color-of-header-nav-bar-on-navigating-to-a-new-state-on-the-app-v-beta14/14857/3 "2014-12-29T22:10:38Z")
Thanks for the reply @mhartington My situation is: I’m **using same template(page.html) for different state/views and I want unique colored headers for each state/view**. Can you please make a codepen using directive that would work on Ionic Beta14? Also, Is there a way to make **_unique colored footer on Modal for different item-click_** opening it? ---
**Author:** ![WidawskiJ](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/widawskij/32/7606_2.png) [@WidawskiJ](https://forum.ionicframework.com/u/WidawskiJ)\ **Post date:** [December 30, 2014, 11:28pm UTC](https://forum.ionicframework.com/t/change-color-of-header-nav-bar-on-navigating-to-a-new-state-on-the-app-v-beta14/14857/4 "2014-12-30T23:28:16Z")
I’m interested in this as well, for the moment, I came up with the hackiest solution possible and I’d love to see your implementation @mhartington ---
**Author:** ![naveenkarippai1](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/naveenkarippai1/32/91429_2.png) [@naveenkarippai1](https://forum.ionicframework.com/u/naveenkarippai1)\ **Post date:** [December 31, 2014, 12:04pm UTC](https://forum.ionicframework.com/t/change-color-of-header-nav-bar-on-navigating-to-a-new-state-on-the-app-v-beta14/14857/5 "2014-12-31T12:04:08Z")
@WidawskiJ Can you show me an alternative solution for the moment please ? My method doesn’t work anymore. ---
**Author:** ![WidawskiJ](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/widawskij/32/7606_2.png) [@WidawskiJ](https://forum.ionicframework.com/u/WidawskiJ)\ **Post date:** [December 31, 2014, 1:38pm UTC](https://forum.ionicframework.com/t/change-color-of-header-nav-bar-on-navigating-to-a-new-state-on-the-app-v-beta14/14857/6 "2014-12-31T13:38:20Z")
@naveenkarippai1 Here you are my friend (click on the ‘scientific facts’ button) > **[Tabs And Navigation: Nightly](https://codepen.io/prettyGoodPancakes/pen/myOJrm)** > > Demo showing how each tab has its own history stack. Navigating between each tab remembers the correct back and forward views that were visited. Forke... ---
**Author:** ![coen\_warmer](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/coen_warmer/32/64036_2.png) [@coen\_warmer](https://forum.ionicframework.com/u/coen_warmer)\ **Post date:** [January 8, 2015, 1:29pm UTC](https://forum.ionicframework.com/t/change-color-of-header-nav-bar-on-navigating-to-a-new-state-on-the-app-v-beta14/14857/7 "2015-01-08T13:29:37Z")
> [@WidawskiJ](#): > > are my friend (click on the ‘scientific facts’ Hey, could you please include the URL to your sample? It seems to be missing. ---
**Author:** ![WidawskiJ](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/widawskij/32/7606_2.png) [@WidawskiJ](https://forum.ionicframework.com/u/WidawskiJ)\ **Post date:** [January 8, 2015, 1:38pm UTC](https://forum.ionicframework.com/t/change-color-of-header-nav-bar-on-navigating-to-a-new-state-on-the-app-v-beta14/14857/8 "2015-01-08T13:38:25Z")
You can access it by clicking the edit on Codepen on the top right of the iframe 🙂 ---
**Author:** ![coen\_warmer](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/coen_warmer/32/64036_2.png) [@coen\_warmer](https://forum.ionicframework.com/u/coen_warmer)\ **Post date:** [January 8, 2015, 3:23pm UTC](https://forum.ionicframework.com/t/change-color-of-header-nav-bar-on-navigating-to-a-new-state-on-the-app-v-beta14/14857/9 "2015-01-08T15:23:13Z")
Ah, how stupid of me- [Privacy Badger](https://chrome.google.com/webstore/detail/privacy-badger/pkehgijcmpdhfbdbbnkijodmdjhbjlgp) was blocking Codepen resources so I didn’t see the widget. Much obliged 😄 ---
**Author:** ![coen\_warmer](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/coen_warmer/32/64036_2.png) [@coen\_warmer](https://forum.ionicframework.com/u/coen_warmer)\ **Post date:** [January 8, 2015, 3:31pm UTC](https://forum.ionicframework.com/t/change-color-of-header-nav-bar-on-navigating-to-a-new-state-on-the-app-v-beta14/14857/10 "2015-01-08T15:31:27Z")
Would there be any way to have more than one color to switch to? In this version it’s possible to have only two states- I’m looking for a way to set a class per view… ----Update Ah, never mind, got it already. Thanks for the approach! ---
**Author:** ![coen\_warmer](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/coen_warmer/32/64036_2.png) [@coen\_warmer](https://forum.ionicframework.com/u/coen_warmer)\ **Post date:** [January 8, 2015, 5:45pm UTC](https://forum.ionicframework.com/t/change-color-of-header-nav-bar-on-navigating-to-a-new-state-on-the-app-v-beta14/14857/11 "2015-01-08T17:45:53Z")
I can’t get this approach to work in a sidemenu based app; even though the rootScope variable changes, the nav-bar directive doesn’t pick it up on change. Any ideas @WidawskiJ or @mhartington? ---
**Author:** ![coen\_warmer](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/coen_warmer/32/64036_2.png) [@coen\_warmer](https://forum.ionicframework.com/u/coen_warmer)\ **Post date:** [January 12, 2015, 1:33pm UTC](https://forum.ionicframework.com/t/change-color-of-header-nav-bar-on-navigating-to-a-new-state-on-the-app-v-beta14/14857/12 "2015-01-12T13:33:41Z")
I’ve created a Codepen to illustrate what I mean: > **[Side Menu and Navigation: nightly](https://codepen.io/squrler/pen/BypeaL)** > > Demo showing how to wire up side menus along with navigation within Ionic. Forked from \[Ionic\](http://codepen.io/ionic/)'s Pen \[Side Menu and Navigati... Anyone have any ideas how to fix this? Github issue: [https://github.com/driftyco/ionic/issues/2916](https://github.com/driftyco/ionic/issues/2916) ---
**Author:** ![nlschlax](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nlschlax/32/7686_2.png) [@nlschlax](https://forum.ionicframework.com/u/nlschlax)\ **Post date:** [January 20, 2015, 6:51pm UTC](https://forum.ionicframework.com/t/change-color-of-header-nav-bar-on-navigating-to-a-new-state-on-the-app-v-beta14/14857/13 "2015-01-20T18:51:20Z")
Any other ideas on this? I’m having the same issue with @WidawskiJ’s solution not working when used with a side menu. Any direction on how to build a directive for this? ---
**Author:** ![coen\_warmer](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/coen_warmer/32/64036_2.png) [@coen\_warmer](https://forum.ionicframework.com/u/coen_warmer)\ **Post date:** [January 20, 2015, 7:49pm UTC](https://forum.ionicframework.com/t/change-color-of-header-nav-bar-on-navigating-to-a-new-state-on-the-app-v-beta14/14857/14 "2015-01-20T19:49:27Z")
@mhartington any idea? ---
**Author:** ![joshbuchea](https://avatars.discourse-cdn.com/v4/letter/j/f05b48/32.png) [@joshbuchea](https://forum.ionicframework.com/u/joshbuchea)\ **Post date:** [February 5, 2015, 12:50am UTC](https://forum.ionicframework.com/t/change-color-of-header-nav-bar-on-navigating-to-a-new-state-on-the-app-v-beta14/14857/15 "2015-02-05T00:50:07Z")
**ping** Anyone have any luck with this? In a sidemenu based app, I need a view’s header bar to be a different color (transparent in this case), to allow content to show through. I’m going to try to tackle this. If I have any luck, I’ll post back. ---
**Author:** ![joshbuchea](https://avatars.discourse-cdn.com/v4/letter/j/f05b48/32.png) [@joshbuchea](https://forum.ionicframework.com/u/joshbuchea)\ **Post date:** [February 5, 2015, 1:17am UTC](https://forum.ionicframework.com/t/change-color-of-header-nav-bar-on-navigating-to-a-new-state-on-the-app-v-beta14/14857/16 "2015-02-05T01:17:35Z")
It’s not a directive, but I have it working in a sidemenu based app for anyone who still needs this… ---
**Author:** ![joshbuchea](https://avatars.discourse-cdn.com/v4/letter/j/f05b48/32.png) [@joshbuchea](https://forum.ionicframework.com/u/joshbuchea)\ **Post date:** [February 5, 2015, 1:22am UTC](https://forum.ionicframework.com/t/change-color-of-header-nav-bar-on-navigating-to-a-new-state-on-the-app-v-beta14/14857/17 "2015-02-05T01:22:50Z")
I can’t seem to embed my pen. Not sure what I’m doing wrong with that… See the Pen [Side Menu and Navigation: Nightly - Change Individual View's Header Bar Color](http://codepen.io/joshbuchea/pen/QwqXPq/) by Josh Buchea ([@joshbuchea](http://codepen.io/joshbuchea)) on [CodePen](http://codepen.io). ---
**Author:** ![joshbuchea](https://avatars.discourse-cdn.com/v4/letter/j/f05b48/32.png) [@joshbuchea](https://forum.ionicframework.com/u/joshbuchea)\ **Post date:** [February 5, 2015, 6:18pm UTC](https://forum.ionicframework.com/t/change-color-of-header-nav-bar-on-navigating-to-a-new-state-on-the-app-v-beta14/14857/18 "2015-02-05T18:18:29Z")
@nlschlax @coen_warmer if either of you are still having this issue, check the CodePen link I just posted. ---
**Author:** ![coen\_warmer](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/coen_warmer/32/64036_2.png) [@coen\_warmer](https://forum.ionicframework.com/u/coen_warmer)\ **Post date:** [February 11, 2015, 11:29am UTC](https://forum.ionicframework.com/t/change-color-of-header-nav-bar-on-navigating-to-a-new-state-on-the-app-v-beta14/14857/19 "2015-02-11T11:29:37Z")
Yup, got it! Works 😄 ---
**Author:** ![arturgor](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/arturgor/32/99392_2.png) [@arturgor](https://forum.ionicframework.com/u/arturgor)\ **Post date:** [March 20, 2015, 12:06am UTC](https://forum.ionicframework.com/t/change-color-of-header-nav-bar-on-navigating-to-a-new-state-on-the-app-v-beta14/14857/20 "2015-03-20T00:06:10Z")
Hi everyone, I have edited @WidawskiJ’s post for multiple colours. maybe it can save your time. > **[Tabs And Navigation: Nightly](https://codepen.io/argonix/pen/EaGWqY)** > > Demo showing how each tab has its own history stack. Navigating between each tab remembers the correct back and forward views that were visited. Forke...