Transparent navbar


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


This should work. Add this to the page sass.

ion-header {
  .toolbar {
    position: absolute;

    .toolbar-background {
      background: transparent;
    .toolbar-title {
      color: black;


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


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


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


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.


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

Please Try This

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