Hide Navbar - Able to be fully hidden?

(Using F7 5.4.0) I’m using the JavaScript action to hide the navbar, in fact I’m hiding it on page load and bringing it in when the content scrolls up a certain distance.

But when it hides, it doesn’t vanish completely; It shrinks back and lives inside the statusbar / safe margin area. I’d like to completely remove it so it isn’t seen at all until it is called.

Is there a certain CSS variable I need to modify so I can make the ‘hidden’ state to be completely transparent?

This is what I use on a new install or when the user is logged out but when you .show() it there are problems but try it and see if that gets you closer.


Add this style to your CSS:

.navbar-hidden {
    transform: translate3d(0, calc(-1 * var(--f7-navbar-height) - var(--f7-safe-area-top)),0);

This will fully hide navbars