Navbar linear gradient and button backgrounds

Hi does anyone know how to achieve a navbar like this with Ionic? I can change the navbar background to a single color with scss but I need gradient and for buttons I need a background color like in the image below

1 Like

You’ll need to use css gradients for that.

Yes I know. but where shall I assign it? And how can I modify those buttons so they have background like that?

You should use button-clear so there is no background on them.

Thank you for the replies but there is still gradient background behind the buttons in that codepen you’ve sent.

So you don’t want the gradient on the button??

The codepen has been updated with that.

how we can set gradient color on header-bar?
i did it by CSS style, but it don’t accept and in the device shows only one color, but in computer browser works correct.

Are you trying this in ios or android? Can you remote inspect to see what lines of css aren’t being applied?

i’m working on ‘www’ folder. (not in the platform folder and not on the specified platform).
in browser (windows 7 - firefox, chrome,…), it’s ok. but when i installed it on android and run it (via ionic run command) it show only one color! (android ver4.2)
app run in device and i can’t debug it.

Hmm got this too, on a 4.3 and below. So after some research, it seems that 4.3 and below only have partial support for gradients, so it will be hit-or-miss for support

1 Like

I ran into this issue when I wanted to apply gradient on the navbar. It fails with a plain color. I think there’s a bug somewhere because the gradient works elsewhere within the ion-content. But once applied on the navbar, it gets replaced with a plain color that is just a mix of the two colors. I’ve tried to inspect and see where the css gets mixed up but have not been able to. I wish someone from ionic checks for us.

I’m thinking the issue is due to the webview on older android devices.
You may want to check out this.

It’s not a thing about the webview. There’s support for it. The gradient applies very well when withing But fails if applied to the header bar. I didn’t try footer bar though. But I believe there’s an overriding css somewhere, or something I can’t explain. It’s definitely not a support thing. The android webview supports it well. It’s simply failing when in a navbar or header bar.

Hi @peterrobot,

If there is overriding CSS styling, setting ‘!important’ flag should take care of that.
Did you try Crosswalk build?

I tried !important still no luck. I’ll share a screen from my app with details but for the mean time, I’ll ry Crosswalk and see.

So I can confirm that issue is with the webview.
I tried this on a vanilla cordova project and still had issues with the gradient rendering.
It would always use the fallback background color.

I have tried crosswalk; the gradient issue was resolved, native “select” input renders well but I wasn’t really satisfied on the all. I just don’t know why. The generated apk is too large, scrolling is not as fluid, there are always some dots and lines on the screen during scrolls. The splash screen is white, …etc.

I just had to reverse to the default webview and look for alternative ways around those issues encountered with the default webview, for now. I won’t like my users to be downloading a very big file during app upgrades.

Well the splash screens have been fixed

Just it hasn’t been published by the cordova team.

As for the scrolling, can you give the nightly builds a try, we’ve android to use native-scrolling isntead of js scrolling.

And again, for the file size, this should be fixed with the latest release of the cli, 1.3.10.

Just ran into the same problem (wanted gradient in header). After lots of try-and-error I came up with this, seems to be the easiest solution:



css-class should have width: fill;height: SOMETHINGpx; and any gradient you want.