Ionic 4 transparent transparent header


#1

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!?


#2

You can try like this .

<ion-navbar transparent>
<button ion-button menuToggle>
      <ion-icon name="menu" color="primary"></ion-icon>
    </button>
   <ion-title>Home</ion-title>
</ion-navbar>
</ion-header>

May be it will help you
Good Luck
Thank you.


#3

That is Ionic3 - Ionic 4 has changed


#4

There was an article on medium:

Make your content fullscreen:

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

And in scss

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

This worked for me


#5

yes this is the correct way. At the time I hadn’t fully looked into he css variables that control the shadow DOM for the Ionic components - in case anyone else is having issue with styles, find the variables with the developer tools and life becomes much easier :slight_smile: