Hide-Nav-Bar Hides Nav-Buttons Too. I Want to Retain The View Title and The Ion-Nav-Buttons

Ionic hide nav-bar not the buttons

You just have to specify what state want to hide the bar, and modify some styles

JS:

$rootScope.$on('$stateChangeStart', function(ev, toState, toParams, fromState, fromParams){

    var states = ['tabs.about', 'tabs.contact'];

    if(states.indexOf(toState.name) > -1) {
      $rootScope.hideBar=true;
    } else {
      $rootScope.hideBar=false;
    }
});

HTML:

<ion-nav-bar class="bar-positive" ng-class="{ 'make-border-trasparent': hideBar }">
  <ion-nav-back-button>
  </ion-nav-back-button>
</ion-nav-bar>

Please take a look at this example (I'm hiding the bar in the tabs.about and tabs.contact states)

Codepen

overwrite ion-nav-bar with ion-header-bar in one page

I got it finally. Just add nav bar buttons instead of ionic header bar.

Ion-tabs and hide-nav-bar leaves space, with top 0px also

Solved now, wanted to share this

This was because of the .has-tabs-top class that was being added to the ion-content element.

added this along with hide-nav-bar in view and .tabs { top: 0 !important; }

.has-tabs-top {
  top: 49px !important; /*  height of the tabs */
}

---

Related Topics