How to make nav-bar transparent?

ionic-v1
1

Here is a plunker: https://plnkr.co/edit/m9Cf6e?p=preview

I would like to make the nav-bar transparent.

Any suggestions?

I had a look at this article: http://www.gajotres.net/creating-a-transparent-navbar-in-ionic-framework/2/

.bar.bar-header {
  background: rgba(255,255,255,.10);
  border-bottom-width: 0;
}

I had a look at this SO question and again it isn’t working for me: http://stackoverflow.com/questions/31092610/transparent-navigation-bar-in-ionic

Yet another option is to use hide-nav-bar="true" and add custom menu on my own:

<a href="" class="icon ion-ios-arrow-back" ng-click="$ionicGoBack()"></a>
<a href="" class="icon ion-navicon" ng-click="toggleMenu()"></a>

But I think it is better to stick to the default nav-bar after making it transparent.

2

Bump!

Anyone? Or maybe I should post to StackOverflow to grab easy rep…

Another - related - forum thread - Transparent Header - that is not working in my case.

I can change <ion-nav-bar class="bar-stable"> in menu.html (line: 3) but still I cannot make the top bar transparent…

Plunker with the demo case once more: https://plnkr.co/edit/m9Cf6e?p=preview

3

Seems that adding styling to the ion-header-bar does the trick

ion-header-bar {
background-image: url('https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg');
}

It might not be the best way to do this but you could create a class on the ion-nav-bar component and reference to ion-nav-bar ion-header-bar.

4

I’m not following / don’t understand. Why background image? https://plnkr.co/edit/yyK7vn?p=preview

My intention was to make the bar transparent, not to pollute it even further with more stuff.

The idea with making header bar transparent is to have full screen background image. Currently it’s just plain red…

5

I am sorry I guess I misunderstood your question. I thought that you wanted your header to have a background. I fiddled around with the fiddle but I could not find a solution yet :(.

6

Posted StackOverflow question: http://stackoverflow.com/questions/36773069/how-to-make-navigation-bar-ion-nav-bar-in-ionic-transparent

And updated the question with some most-common suggestions.

Many thanks for your help and support.

8

Have you tried this solution, adding the bar-clear class and modifying the ion-content?