Hide Navbar in Ionic 2

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.

I tried doing this and its undefined

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

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.

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”;
}