How to reduce header opacity in Ionic 3

@kwanite wrote:

Is there a way to reduce the opacity of Ionic 3 header? I read through all posts and tried almost everything and nothing works.

I want to fix a button on the right corner so that it doesn’t get scrolled down. That’s why I need a header. The code below causes the button to have a fixed position where I want and not get scrolled down. BUT, I cannot change the opacity of the header no matter how hard I try. Ideally, I would have it transparent.

And <ion-navbar transparent> doesn’t work… it was a feature of Ionic 2, I guess. Changing opacity of header using CSS changes the opacity of the content (e.g., the button) but does not make the background less opaque.

<ion-header no-border>
    <ion-navbar>
        <ion-buttons end>
            <button class="closeButton" ion-button (click)="closeModal()" clear>
          <ion-icon name="close-circle" style="font-size: 2.2em; color: gray"></ion-icon>
        </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

<ion-content padding>
....</ion-content>

Why would editing header colour and opacity by page be left out of Ionic? So there must be a solution to this…

Posts: 1

Participants: 1

Read full topic