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

Did you try this ?

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

Answer 2

...    
<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 3

If you want translucent header in ionic 4 you need to add the "translucent" property to the header tag, not the toolbar tag.

<ion-header translucent="true">
  <ion-toolbar>
    <ion-title>Toolbar Title</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen="true">
    <!-- content here -->
</ion-content>

From the ionic doc... Translucent

Attribute: translucent Type: boolean If true, the header will be translucent. Note: In order to scroll content behind the header, the fullscreen attribute needs to be set on the content. Defaults to false.

Answer 4

This worked for me, header is transparent but there was still some white space

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

but using the ion-toolbar inside ion-content removed it from above the background

<ion-content>
  <ion-toolbar slot="fixed">
  </ion-toolbar>
</ion-content>

Answer 5

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>

Answer 6

Try this one
mypage.page.html

<ion-header no-border no-shadow>

  <ion-toolbar color="medium">
    <ion-title>My Page</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen="true">

</ion-content>

Now change the variable.scss file of medium color to

--ion-color-medium: #ffffff00;

Answer 7

I try this and it works

In variables.scss

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

In the page

<ion-header translucent></ion-header>

<ion-content fullscreen>
    <div class="contenu"></div>
</ion-content>

I also want to notice that in the .scss file. I did

 .contenu {
     position : absolute; 
     top : 0;
     left : 0;
     height: 100vh;
     width: 100vw;
  }

because the content was under the header

Answer 8

I had a problem which ion-content had space top of it and the content started from below the header, so I solved it by moving ion-toolbar to my ion-content and fixed it position by using slot=fixed:

<ion-content>

  <ion-toolbar slot="fixed">
    ...
  </ion-toolbar>

  ...

</ion-content>

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

Answer 9

In CSS

.productHeader {
    --background: transparent;
}

Ionic HTML

<ion-header no-border>
  <ion-toolbar class="productHeader">
   .
   .
   .
  </ion-toolbar>
</ion-header>

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

Make sure that you add fullscreen in ion-content and in order to remove shadows that appear in header i have added no-border

Answer 10

Neither of the solutions works for me (Ionic 5, Angular 11), but finally achive with:

ion-content {
  position: absolute;
  top: 0;
}