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, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!
 

Table of Contents

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

Tutorials

Other Resources (themes, templates, plugins, Cordova plugins, starter apps)

Cordova Plugin Tutorials

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