Transparent Header


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

<ion-nav-bar type="bar-light" 
         back-button-type="button-icon button-clear" 


How to make nav-bar transparent?

Sorry, dumb question. Just: background: none;



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: {
  background-color: rgba(255,255,255,.66) !important; /* or transparent, or background:none */
.scroll-content {
  overflow: visible !important;

Transparent navbar In ionic-beta.14

@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">


I am using 1.0 and class=“no-header” works:


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

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