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