hide-nav-bar hides nav-buttons too. I want to reta

Question

I added hide-nav-bar attribute expecting to hide the navigation bar on profile page. It removes the entire navigation bar along with buttons and title.

Profile.html

<ion-view view-title="Profile" hide-nav-bar="true">
    <ion-content>
    </ion-content>
    <ion-footer-bar align-title="left" class="bar-balanced">
        <a class="button-icon title" href="">
            <i class="icon ion-ios-telephone-outline"></i>
        </a>
    </ion-footer-bar>
</ion-view>

Side-menu code snippet :

 <ion-side-menu-content>
        <ion-nav-bar class="bar-balanced">
            <ion-nav-back-button>
            </ion-nav-back-button>

            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
                </button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content>

Is there any CSS or Angular workaround for this?

I want to keep the nav-back-button and nav-buttons along with the view title. How do I do it?

I have researched into a few methods,but these need cordova plugin and are iOS specific like : http://ionicframework.jp/tutorials/fullscreen-apps/

and also

this: http://codepen.io/ciastek/pen/lxmyC

These don't serve my purpose. Please suggest an alternative like a css header bar-transparent or some $ionic delegate that works with angular to remove only the bar and not the buttons.

Answer 1

Ok, here is the thing, make a css class

.make-border-trasparent{
  background-color: rgba(0, 0, 0, 0.0) !important;
  border: none;
  .bar.bar-light {
    background-color: rgba(0,0,0,0) !important;
  }
}

Now add this class to your nav bar using ng-class with conidtion

<ion-nav-bar ng-class="{'make-border-trasparent': hideBar,'bar-balanced': !hideBar }">

And for which page you want to make nav bar total transparent,write this line on that particular controller

$rootScope.hideBar = true;

This will make only your bar total trasparent. Buttons and other things will remain visible on navigation bar.