Change color of header (nav-bar) on navigating to a new state on the App (V.beta14)


How to change the color of header(nav-bar) on navigating to a new state?

This method in the codepen doesn’t work anymore on Beta14.
Is there a workaround on beta14?

Thanks in advance!!

1 Like

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

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?

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

@WidawskiJ Can you show me an alternative solution for the moment please ? My method doesn’t work anymore.

@naveenkarippai1 Here you are my friend (click on the ‘scientific facts’ button)


Hey, could you please include the URL to your sample? It seems to be missing.

You can access it by clicking the edit on Codepen on the top right of the iframe :slight_smile:

Ah, how stupid of me- Privacy Badger was blocking Codepen resources so I didn’t see the widget. Much obliged :smile:

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…


Ah, never mind, got it already. Thanks for the approach!

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?

I’ve created a Codepen to illustrate what I mean:

Anyone have any ideas how to fix this?

Github issue:

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?

@mhartington any idea?


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.

It’s not a directive, but I have it working in a sidemenu based app for anyone who still needs this…

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 by Josh Buchea (@joshbuchea) on CodePen.

1 Like

@nlschlax @coen_warmer if either of you are still having this issue, check the CodePen link I just posted.

1 Like

Yup, got it! Works :smile:

1 Like

Hi everyone, I have edited @WidawskiJ’s post for multiple colours.
maybe it can save your time.

1 Like