Here is a plunker: https://plnkr.co/edit/m9Cf6e?p=preview
I would like to make the
I had a look at this article: http://www.gajotres.net/creating-a-transparent-navbar-in-ionic-framework/2/
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.
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
Seems that adding styling to the ion-header-bar does the trick
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.
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…
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 :(.
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.
Have you tried this solution, adding the
bar-clear class and modifying the