Ionic 4 transparent transparent header

Question

I have an Ionic 4 app and I want a transparent header. The Ionic documentation states that 'fullscreen' must be added to the ion-content, and that 'translucent' must be added to the ion-toolbar.

This does not work and always leaves the toolbar at the top. I have added this to the css as well:

ion-toolbar {
   --background: transparent;
   --ion-color-base: transparent !important;
}

<ion-header>
  <ion-toolbar translucent >
    <ion-buttons slot="start"  (click)="goBack()">
        <ion-icon name="arrow-back"></ion-icon>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen >
</ion-content>

The only way I can find that achieves the affect of a transparent header is when I go to the Shadow DOM in chrome and add a background attribute to the class 'inner-scroll'

However there are no variables associated with background color in this class and so I cannot change the background using this method.

How can I make this transparent header/toolbar work!?

Solution:

for anyone else having this issue - the documentation is not clear at all. To get a fully transparent functional header:

<ion-header>
  <ion-toolbar translucent>
    <ion-back-button></ion-back-button>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen> </ion-content>

No in the css add the following:

ion-toolbar {
--ion-toolbar-background-color: transparent;
--ion-toolbar-text-color: white;
}

The documentation only specifies the HTML side of things but with the new Shadow DOM in Ionic, variables must be used to changed most of the Ionic component styles.

Answer 1

...    
<ion-toolbar color="translucent"> 
...

and if you want to get rid of the box shadow of your header you can do it in your css like:

.header::after {
  background-image: none;
}

Answer 2

Maybe I'm a little late, but just to anyone who is in the same situation with Ionic 5, 6 or later you can do this:

ion-toolbar {
  --opacity: 0;
}

And the toolbar background will be transparent. It is in the ion-toolbar documentation

---

If you needs ion-content overlapps with header, add fullscreen props(documentation)

<ion-content fullscreen></ion-content>