Search code examples
ioscordovaionic-frameworkhybrid-mobile-app

Transparent navigation bar in Ionic

My Ionic application have a detail view with transparent header. Applying CSS class "bar-clear" to my element is doing the job just fine in desktop browsers and when running the app on Android (see result here).

But when running on iOS 8 the header is white and opaque (see here).
Any idea why?

Solution

  • I did some research and people it got it working by setting bar-light to the header bar and then making these changes: 

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

    See this playground: http://play.ionic.io/app/3cbf53eff565

    Will it work once built? not sure but give it a go and let me know.