Hide Navbar in Ionic 2


#1

This is a very common question with very conflicting information due to refactoring. Ionic 2 isn’t fully documented yet.

Is there an api to toggle this ?

The issue is when setting html5 video to fullscreen elements get hidden underneath the navbar. I can hide the statusbar but the navbar is a problem. The navbar also seems to effect how elements are resized when going fullscreen.


#2

I tried doing this and its undefined

let nav = document.getElementsByName(“ion-navbar”)[0];


#3

I believe scroll-content tag had a margin-top added to deal with the narbar so even if the navbar is hidden it’s still set to 64px;

The correct usage as far as I’m aware now is

let nav = document.getElementsByTagName(“ion-navbar”)[0];
let content = document.getElementsByTagName(“scroll-content”)[0];


var isFullscreen = e.type == “fullscreen”;

  console.log("FULLSCREEN", isFullscreen);

  if (isFullscreen) {
    StatusBar.hide();
    content.classList.add("fullscreen");
    nav.classList.remove("show-navbar");
    //nav.style.display = "none";
  } else {
    StatusBar.show();
    content.classList.remove("fullscreen");
    nav.classList.add("show-navbar");
    //nav.style.display = "block";
  }

scroll-content.fullscreen {
margin-top: 0px !important;
}

The old version had a helper method which was remove it seems.


#4

It seems after hiding all these elements and statusbars any icon or button in the top right hand corner loses click events like something is overlaying over the top still .

So that adding / removing class name is an opacity style not a display style. Had to change to display to get the elements clickable.

if (isFullscreen) {
StatusBar.hide();
content.classList.add(“fullscreen”);
nav.style.display = “none”;
} else {
StatusBar.show();
content.classList.remove(“fullscreen”);
nav.style.display = “block”;
}