Search code examples
angularionic-frameworkionic4

Ionic 4 transparent transparent header

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.

Solution

  • Did you try this ?

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