Transparent ion-header-bar

ionic-v1
1

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

Regards,
KrzysiekF

2

I do it by using this. You can try.

<ion-nav-bar  style="background: none; border-bottom: none">
   
</ion-nav-bar>
3

@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;
    }
    }
  }
}
1 Like
4

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

5

nope, because this code is closed in class:

.dashboard-view {
    (...)
}

so it works just fine :wink:

6

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

5 Likes
7

+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="top: 0;">
  ...
  </ion-content>
</ion-view>

Here I have added some inline css but its better to add it to your scss file

6 Likes
8

Here’s the sample image:

image
transparent_bar_header.png321×570 115 KB

1 Like
9

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

3 Likes
10

thanks a lot, It works for me.

11

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.

12

Here a demo for ionic2.
Learn more