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

ionic-v1
1

Hi,

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
2

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

3

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?

4

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

5

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

6

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

6 Likes
7

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

8

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

9

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

10

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!

11

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?

12

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

Anyone have any ideas how to fix this?

Github issue: https://github.com/driftyco/ionic/issues/2916

13

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?

14

@mhartington any idea?

15

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.

16

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

17

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
18

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

1 Like
19

Yup, got it! Works :smile:

1 Like
20

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

1 Like