How to hide nav-bar with tabs in Ionic 2?

I only want to hide it in one of the pages excluding others.

<ion-navbar *navbar   >
  <ion-title>Item Details</ion-title>

I have tried hide-nav-bar=“true” but it does not work.

<ion-navbar hideBackButton *navbar>< /ion-navbar>

I’m not sure if this stops the use of Android’s hardware back button.

I do the same in my login page, i couldn’t remove the nav bar for that one since that breaks the tab name in browser and probably too in mobile when seeing opened apps.

I made a hidden class and applied it to the nav bar just in login page.

.hidden {
  display: none!important;
// login.js
<ion-navbar primary *navbar class='hidden'>
  <ion-title>TAO Login</ion-title>
1 Like

Hey guys, Max here!

I played around with it, because i had the same issue and saw there was no answer and i think i came up with one.

In your login.js file or whatever your file name is, you need to have a function for the button that will change the root and not just push a new view on top of it.

//GoToTabs is my function name goToTabs(){ //Here is all you need, we just set the root for our app.html file to this file so it becomes the main source this.nav.setRoot(HelloIonicPage); }

Sorry if this is confusing to anyone, im still a beginner myself just wanted to share a quick fix with my fellow developers. Happy Building!


Humm what does this have to do with the subject of this topic?

it gets rid of the back button on the navbar if you are coming from a another page, like a sign in page for example.

The issue here is that the topic creator wants to hide the whole navbar without loosing the tab name when in browser (i think) not just the back button.

1 Like

Sorry for the late replay. But it seems that set “display:none” in ion-navbar not work in this cas.
It will appears an blank after add the “display:none” style.

When i inspect that region i found that the “ion-navbar-section” is the node that occupy that place.


But when i force set “display:none” in the “ion-navbar-section” , it will effect on every tab and it’s subpage.

Is your nav bar in the app.html or do you have one for each page? i have one for each page so i can isolate the one that i want to hide the navbar.

I am having the same issue. Did you find a solution?

I used the state change event (may be different term) to hide the tabs bar. And hope you can do the same thing for your nav-bar also.

    $scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
            if ('' ||'home.collection-detail') {
                vm.lHideTabs = true;
            else {
                vm.lHideTabs = false;
                title:'Error: $scope.$on',


Sorry for the late. I got a solution in @luchillo17 .
The solution is that just let each page have it’s own nav-bar :

<ion-navbar ></ion-navbar> in every page instead of using *navbar

Then, when you want to hide one of the navbar, just set style="display:none" on that navbar or use *ngIf

1 Like

But this way will add a black bar at the top of the nav bar tho…

//hide nav bar when we enter the page
onPageWillEnter() {
document.getElementsByTagName(“ion-navbar-section”)[0].style.display = “none”;

//show nav bar when we leave the page
onPageDidLeave() {
document.getElementsByTagName(“ion-navbar-section”)[0].style.display = “block”;

Has anybody found a better way to hide the nav-bar on certain tabs, but not all? Seems like a bit of a hack to me.