Transparent Header

Hi. How can i make the header with transparent background?
I’m using it like this:

<ion-nav-bar type="bar-light" 
         animation="nav-title-slide-ios7" 
         back-button-type="button-icon button-clear" 
         back-button-icon="ion-ios7-arrow-back"
         id="header{{sezione}}"></ion-nav-bar>

Thanks.

Sorry, dumb question. Just: background: none;

1 Like

Applying

background: none;

used to work in beta 13. But beta 14 had sweeping CSS animation changes and this doesn’t seem to work anymore.

Hi @kevinwu, if transparent means that the content can be seen below, you should just set two extra lines of CSS:

.bar.bar-light {
  background-color: rgba(255,255,255,.66) !important; /* or transparent, or background:none */
}
.scroll-content {
  overflow: visible !important;
}
3 Likes

@xAlien95, Could I question one more?

In given code pen code, there is ion-header-bar, no ion-nav-bar.

And I’ve applied with your code into my ion-nav-bar, It is not works…

Is there another solution for navigation bar?

I’m using version of beta-14.

Just use this for transparent background:

<ion-nav-bar class="bar-clear">
    ...
</ion-nav-bar>
5 Likes

I am using 1.0 and class=“no-header” works: http://cl.ly/cj6W

for ios, do the following:

.bar.bar-header h1 {
color: black !important;
}
.scroll-content {
overflow: visible !important;
}    
.bar.bar-header {
     background: rgba(255,255,255,.10);
border-bottom-width: 0;
}
.platform-ios.platform-cordova:not(.fullscreen) .has-header {
 top:0px; 
}

I guess the last rule is the key.
see more details on Creating a Transparent NavBar In Ionic Framework