Michal Stefanow Michal Stefanow - 1 year ago 458
CSS Question

How to make navigation bar (ion-nav-bar) in Ionic transparent?

I'm using Ionic

ionic start myApp sidemenu

It generates a sample project with some useful tools and default configuration.

What I'm trying to accomplish it to make header bar (
) transparent.

enter image description here

Here is the plunker: https://plnkr.co/edit/qM3YsJ?p=preview

By default it uses (

<ion-nav-bar class="bar-stable">

I asked this question a week ago on Ionic forum - https://forum.ionicframework.com/t/how-to-make-nav-bar-transparent/49250 - I even managed to find a workaround but it would be so much easier if I could just just make the header (navigation) bar transparent.

Here is codepen example that works: http://codepen.io/Samurais/pen/dPRMKL

The problem is - the moment I replace with
it doesn't work anymore.


Many people are suggesting
background-color: transparent !important
- OBVIOUSLY - but it's not that trivial due to many underlying elements, positioning, translate3D, z-index... I mean that if it was that trivial I'd probably figure it out by now.

Many people are suggesting hiding the nav bar, that's exactly what I did:

I even managed to find a workaround

But it's a workaround as I'm recreating many default, native elements which is not cool.

Finally... It takes 10 seconds to edit the Plunker. It takes 20 seconds to fork it, grab the URL and reply with the actual working URL instead of some untested solution.

Thank you for teaching me how to become better communicator. I thought that statement "I would like to make nav-bar transparent" and the context (links, plunker, alternative solutions, my post on the forum) are making it clear, apparently I need to enhance my communication skills.

Answer Source

Updated plnkr: https://plnkr.co/edit/qM3YsJ?p=preview

ion-content.has-header {
  top: 0;

.bar {
  background-color: transparent;

.bar-header {
  border-bottom-width: 0px;

(it would be cleaner to support transparent class by default)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download