CODEWITHSUNDEEP
cssweb-componentcss-variablesionic4
saiy2k
saiy2k

Reputation: 1862

Ionic 4: Transparent Header

I want to make my header background color transparent. My HTML is as follows:

account.page.html

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button defaultHref="home"></ion-back-button>
        </ion-buttons>
        <ion-title>Account</ion-title>
    </ion-toolbar>
</ion-header>

account.page.scss

ion-header {
    --ion-toolbar-background-color: rgba(0, 0, 0, 0);
}

This makes the bg color white, rather than being transparent. I also tried settings background: transparent to each element via Chrome Inspector. But I am only getting white.

Any help how to achieve this?

Upvotes: 3

Views: 3754

Answers (5)

Tendai kastande
Tendai kastande

Reputation: 41

How to remove ionic toolbar shadow on IOS and Android

/* Remove bottom border on ios */
    .header-ios ion-toolbar:last-child {
      --border-width: 0;
    }
    
    //remove bottom shadow android
    .header-md::after {
      display: none;
    }

Upvotes: 0

Meh Man
Meh Man

Reputation: 473

Only add this class to <ion-toolbar>. You can set color for ion-content and ion-toolbar.

ion-toolbar.transparent {
  --background     : transparent;
  --ion-color-base : transparent!important;
  position         : absolute;
  top              : 0;
}

Upvotes: 2

Nasenbaer
Nasenbaer

Reputation: 4900

I had the same issue today and found the following solution to get my menu with transparent toobar in Ionic 5.

Set content to [fulscreen]="true". Remove toolbar color with --background: transparent. Set the toolbar to the top of page with position: absolute; top: 0;. 

ion-toolbar {
  --background: transparent no-repeat fixed center;
  --color: black;
  position: absolute;
  top: 0;
}

remove the shadow in the header with class=ion-no-border

Transparent toolbar in IONIC 4

Upvotes: 8

Felix O
Felix O

Reputation: 61

You had the right idea. Target the ion-toolbar instead of the ion-header in your scss.

account.page.scss

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

And as mentioned earlier you would add no-border to the ion-header element and fullscreen to the ion-content.

account.page.html

header

<ion-header no-border>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button defaultHref="home"></ion-back-button>
        </ion-buttons>
        <ion-title>Account</ion-title>
    </ion-toolbar>
</ion-header>

content

<ion-content fullscreen>

</ion-content>

Upvotes: 2

Borongaj
Borongaj

Reputation: 461

Add fullscreen to <ion-content>

<ion-content fullscreen>

</ion-content>

Add no-border to <ion-header>

<ion-header no-border>

</ion-header>

Upvotes: 3

Related Questions