Creating a Transparent NavBar In Ionic Framework

Written by on August 12, 2015

Creating a Transparent NavBar In Ionic Framework

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

[spoiler title=” 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


[/spoiler]

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

Categories

2 thoughts on “Creating a Transparent NavBar In Ionic Framework”

  1. 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?

Leave a Reply