Ionic 4 transparent transparent header

10
votes

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.

11
angularionic-frameworkionic4
Hey can you explain what is UX you are trying to achieve - you want header to have transparent background BUT be still able to see buttons title etc or what? - Sergey Rudenko
Instead of --ion-toolbar-background-color it should be --ion-background-color, just because of this change I was struggling myself, now everything just fall in place! :) - Ankur Shah
Also replace --ion-toolbar-text-color with --ion-toolbar-color - stephen
The solution does not work in Ionic 5. I had a working solution for Ionic 4 but no idea for ionic 5. - MadMac

11 Answers

6
votes

Did you try this ?

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

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.

3
votes
...    
<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;
}
3
votes

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>
0
votes

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;
0
votes

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

0
votes

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;
}
0
votes

question is about ionic 4. you should use:

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

see --background used as in ionic docs

0
votes

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

0
votes

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

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

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

ion-toolbar {
    --opacity: 0;
}

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