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-toolbar translucent  >
    <ion-buttons slot="start"  (click)="goBack()">
        <ion-icon name="arrow-back"></ion-icon>

<ion-content fullscreen >

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


You can try like this .

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

May be it will help you
Good Luck
Thank you.


That is Ionic3 - Ionic 4 has changed


There was an article on medium:

Make your content fullscreen:

<ion-content fullscreen>

And in scss

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

This worked for me


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: