Hi, is there a simple way to create transparent ion-header-bar? Regards, KrzysiekF

I do it by using this. You can try. <ion-nav-bar style="background: none; border-bottom: none"> </ion-nav-bar>

@motiurion it’s not work in my case I don’t know if this is correct solution, but it works for me: .nav-bar-container { .nav-bar-block { .bar { background: transparent !important; border-bottom: none; .title { color: #FFFFFF; } } } }

@KrzysiekF That’s great that you can solve it. But I think it may effect all the pages.

nope, because this code is closed in class: .dashboard-view { (...) } so it works just fine :wink:

Just to add to the topic there is also the bar-clear class that does this. :smile:

+1 for @brandyshea 's answer. Use the bar-clear class for the nav bar. But you also have to add some styling to the ion-content directive otherwise you can get an empty white bar at the top. <ion-view> <ion-nav-bar class="bar-clear" ... </ion-nav-bar> <ion-content class="no-header" style="…

Here’s the sample image: [image]

@brandyshea , @orthodoc thank you for help :blush:

Hey, I am wondering whether the same solution still work for Ionic2? I am using the class="bar-clear" for nav-bar and class="no-header" for content but the navbar still has white background.

Transparent ion-header-bar

ionic-v1

jeneser April 5, 2017, 2:33pm 12

Here a demo for ionic2.
Learn more

Topic		Replies	Views
How to make nav-bar transparent? ionic-v1	6	4194	April 28, 2016
[Ionic 2] Transparent Header ionic-v3	11	7554	October 21, 2018
Transparent Header ionic-v1	7	18508	April 22, 2016
Transparent navbar In ionic-beta.14	2	1502	February 12, 2015
How can I make a transparent toolbar? ionic-v3	42	34424	June 13, 2017

Transparent ion-header-bar

Related topics