How can I make a transparent toolbar?

The suggestion was awesome, but is no longer needed as of BETA 10. Two of the breaking changes mentioned:

ion-content now takes up 100% of the viewport height, but it has margin added to the top and bottom to adjust for headers, footers, and tabs.
ion-content now accepts fullscreen as an attribute to to tell the content to scroll behind the header. This allows for transparent toolbars and tab pages without navbars!

So… finally without to many hassle a transparent navigation!

Tried and not working for me. Any working example?
:S

Did you check out the example in the blog about this release? You can find it over here. Good luck @Corin

Thank you for your help @luukschoen, but its not exactly what I need.

I need a full transparent header and I’ve tried to set some properties in the css without success. :frowning:

Do you want the ionic header to be transparent or the statusbar? I should notice that the backdrop filters only work on safari now. If you just want it transparent, use an rgba or something like that :slight_smile:

Hi,
Is the example in the blog about the beta 10 release still working in beta 11 ?
Because it’s not for me :confused:
I’ trying to get only the ion-toolbar transparent but nothing happens !
I have the same header organisation as the example.

Thanks for your help.

Ok the example is working, but I “just” want a transparent sub-header (no scroll), and to see my google maps under it.

How can do that ?

Guys who have solved this issue can you please create a codepen please. It will be very helpful for many developers.

Thanks

I did this and it worked for me.

you can check my code here: http://codepen.io/rramirezz/pen/PGwGGq

@Corin maybe this is what you are looking for, try and let me know if this works for you too.

Thank you for your help @rramirezz

Heyy, this way is working:

.mypage {
  ion-header::after {
    background: transparent;
    background-image: none !important;
  }
  .toolbar {
    .toolbar-background{
      background: transparent;
    }
  }
}

Thank you!!

1 Like

I’m using beta.11 and this worked for me:

<ion-header no-shadow>
  <ion-navbar transparent>
    <button menuToggle>
      <ion-icon name="menu"></ion-icon>
   </button>
 </ion-navbar>
</ion-header>
<ion-content>

Since fullscreen peroperty does not work on ion-content I still need to apply some sort of hacks like this here:

1 Like

Hi, can you help me?
I’m using beta 11, and your solution not working, i don’t know why.

Thx

I will be available 4 hours later and then we can take a look at it :wink:

1 Like
**HTML**
<ion-header transparent-header-bg></ion-header>

**SASS**
[transparent-header-bg]{
        .toolbar{
            .toolbar-background{
                background: none;
                border: none;
                margin: 0;
            }
            .toolbar-content{
                ion-title {
                    .toolbar-title{
                        color: $white;
                    }
                }
            }
            
        }
        &+ion-content{
            .fixed-content, .scroll-content{
                margin-top: 0 !important;
            }
        }
    }

Try with this hope you’ll get navbar as you are looking for

Hi,all
So awesome @HsuanXyz

I have a idea!
(thans @peterbetos @saademotion_dev)

Firstly, Please distinguish between toolBar and statusBar.The discussion hear is about toolBar.

For transparent toolbar:You can simply add some styles in your code. @luukschoen has given the answer
. ionic-2-beta-10.

The first way:

<ion-header class="opaque">
...
</ion-header>

<ion-content fullscreen>
  ...
</ion-content>
.opaque {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

.opaque .toolbar-background {
  background-color: rgba(#f8f8f8, 0.55);
}

The second way:

<ion-header>
...
</ion-header>
.scroll-content {
    margin-top: 0 !important;
  }
ion-header, .toolbar-background {
    background-color: initial !important;
    // background-color: rgba(0,0,0,0) !important;

    &:after {
      height: 0  !important;
    }
  }

That’s ok!


If you are confused.and If you want a Translucent statusBar for android.Look at the following demo.Here Mixed with statusBar and toolbar.

image

1 Like

Looks pretty damn nice does two combined :-).

Yeah,thank you:grin:

Apply “custom-class-name” in ion-header tag :

Apply this class in your scss file:

.custom-class-name {
.toolbar{
.toolbar-background {
background: transparent;
}
}
ion-icon{
color: color($colors, YOUR_COLOR_APPLIED_IN_variables.scss_FILE);
}
.toolbar-title{
color : color($colors, YOUR_COLOR_APPLIED_IN_variables.scss_FILE);;
}
&:after {
height: 0 !important;
}
}

1 Like

Awesome, Thank you buddy, works like a boss

I replaced:
color: color($colors, YOUR_COLOR_APPLIED_IN_variables.scss_FILE);

with

background-image: url(’…/assets/img/image_name.png’);