Qfyilyi

I have to succeed in making ion-navbar transparent.
I tried to put transparent, but it does not work.

"devDependencies": {

        "@ionic/app-scripts": "2.1.3",

        "ionic": "3.20.0",

        "typescript": "2.3.4",

        "electron": "^1.6.5"

    },

page.html

<ion-header>

  <ion-navbar>

    <ion-title>

      {{show.title}}

    </ion-title>



    <ion-buttons end>

      <button class="appbarButton" *ngIf="target == 'tv'" ion-button icon-only (click)="selectCurrentEpisode()">

        <ion-icon name="skip-backward"></ion-icon>

      </button>

      <button class="appbarButton" *ngIf="target == 'tv'"  ion-button icon-only (click)="selectNextEpisode()">

        <ion-icon name="skip-forward"></ion-icon>

      </button>

      <button class="appbarButton" *ngIf="detail" ion-button icon-only (click)="changeFavorite()">

        <ion-icon name="{{ (detail.favorite == true) ? 'star' : 'star-outline' }}"></ion-icon>

      </button>

    </ion-buttons>

  </ion-navbar>

</ion-header>

Did you try to play with its opacity ? Try this :

HTML file :

<ion-navbar class="transparent-nav-bar">

   <ion-title>

      {{show.title}}

    </ion-title>

</ion-navbar>

SCSS file :

.transparent-nav-bar {

    opacity: 0;

}

Try adding a custom color in your src/theme/variables.scss file by adding a property in the $colors map and then call it like this.

<ion-navbar color="custom">

If you are trying to find the right class try this:

.toolbar-background.toolbar-background-md{

     background-color: transparent;

}