Depending on your needs, a transparent NavBar can improve UI look and feel of your application. Unfortunately, this is not something that can do out of the box. Instead, we will need to play with the Ionic Framework CSS to achieve this feature.
 
The solution I’m going to show you will only with framework version 1.0RC and above. The solution for older versions can be found in the official Ionic forum.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Table of Contents

 
Click here if you want to see other tutorials, or articles about Ionic themes, templates, plugins ...

Intro

 
We’re going to continue on the Side Menu pattern example. We’re going to create a simple movie search application using Ionic Framework.
 
Let’s create a fresh Android and iOS Ionic Framework project using the Ionic and Cordova CLI through Command Prompt (Windows) or Mac/Linux terminal:
 
ionic start transparentDemo blank
cd transparentDemo
ionic platform add android
ionic platform add ios
 
Caution: you cannot cannot add and build for the iOS platform if you're not working on a Mac.
 

Theory

 
All we need is this CSS:
 
.bar.bar-header {
  background: rgba(255,255,255,.10);
  border-bottom-width: 0;
}

.bar.bar-header h1 {
  color: black !important;
}

.scroll-content {
  overflow: visible !important;
}

.platform-ios.platform-cordova:not(.fullscreen) .has-header {
  top:0px;
}
 
This CSS rule will affect every Ionic navbar:
 
.bar.bar-header {
  background: rgba(255,255,255,.10);
  border-bottom-width: 0;
}
 
You can, of course, use this rule on a specific navbar, in this case just adjust navbar class name. If you want full transparency replace rgba(255,255,255,.10); with rgba(255,255,255,0);.
 
There’s one last important information, this rule:
 
.platform-ios.platform-cordova:not(.fullscreen) .has-header {
  top:0px;
}
 
is sometimes required if you want to enable this feature on iOS platform. Depending on your needs, you may want to push content below the navbar. I have disabled this specific rule in my example.
 
Continue Reading

  • ayyazzafar

    Great Post. Thanks for sharing.
    I followed your tutorial but my navbar is still same. I want transparent navigation bar overlapping content.
    Can you please help if possible?

  • Krishna Karki

    Any tip for ionic 2 transparent nav bar?