Ionic 4 transparent transparent header

Ionic Framework ionic-v3
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!?

1 Like
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

1 Like
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:

6

Hi try this I know its not documented but after trying different combinations managed to do it without adding custom css.

<ion-header no-border>
  <ion-navbar transparent>
    <ion-buttons slot="start"  (click)="goBack()">
        <ion-icon name="arrow-back"></ion-icon>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen >
</ion-content>
2 Likes
7

Hi,

I am facing the same issue with ionic 5.
None of these solutions work for me.
Please suggest any solution.

Thanks,
Vanisree

1 Like
8

I believe there must be an issue with ionic 4+ itself with regards to translucent headers. I’ve been trying to get a translucent header working for over an hour today here, and so far none of the specified settings in the ionic 4 documentation seem to work.

I have my page set up as follows:

<ion-header translucent>
  <ion-toolbar>
    <ion-buttons slot="start" *ngIf="authorities.current$ | async">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>
      <img src="assets/images/img_main.png" alt="">
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen>

I have tried the following styles as well:

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

  ion-button {
    --background: var(--dark-red);
    --background-activated: var(--darker-red);
    --background-focused: var(--dark-red);
    --background-hover: var(--dark-red);
  }
}

All to no avail. The interesting thing is, I have used backdrop-filter myself in other areas of the app, and those are working. So I know that backdrop filter works on both Chrome on desktop, as well as Safari on iPhone. I think the base styles in ionic 4 must somehow be preventing backdrop-filter from working to produce a translucent (frosted glass like) header.