Transparent ion-header-bar

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


I do it by using this. You can try.

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

@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

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-nav-bar class="bar-clear"
  <ion-content class="no-header" style="top: 0;">

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


Here’s the sample image:

1 Like

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


thanks a lot, It works for me.


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.

Here a demo for ionic2.
Learn more