Transparent navbar

Ionic Framework ionic-v3
1

I have the following code: <ion-header no-border transparent> <ion-navbar hideBackButton="true" transparent> <button ion-button icon-only menuToggle color="dark"><ion-icon name="menu" md="md-menu"></ion-icon></button> <ion-title menuToggle>ENKI</ion-title> </ion-navbar> </ion-header>
but I want the background to be transparent. I added the tag transparent, class transparent and without positive results

2

This should work. Add this to the page sass.

ion-header {
  .toolbar {
    position: absolute;

    .toolbar-background {
      background: transparent;
    }
    .toolbar-title {
      color: black;
    }
  }
}
2 Likes
3

In the ion-header I have a btn menu which opens the menu. But adding the styles you gave me does not work. The div of the map is on the header the click does not work on the header

4

Try it without the position:absolute. If make sure yor css is not overridden by ionic css.

5

Styles are applied correctly. The problem is that the div of the native map is placed above the header when applying the absolute position

6

And if you delete the absolute position it is no good?
I think that if you want to change the background only you shouldn’t change position.

7

To apply the transparent background if I apply the absolute position changes the color backgroun to transparent, otherwise it does not change it

8 
Please Try This

HTML =  <ion-header transparent>
Scss = ion-header[transparent] .toolbar-background { background: transparent;}
2 Likes
9

Maybe this module could help:

10

I found this tutorial very simple and with the best result :slight_smile:
https://juniorabranches.herokuapp.com/posts/ionic-3-creating-transparent-header