Hide Navbar - Able to be fully hidden?

Questions
1

(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.

IMG_6534
IMG_6534.jpg750×135 9.9 KB

IMG_6533
IMG_6533.jpg750×120 7.79 KB

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

2

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.

        $$('.navbar').hide();
        $$('.toolbar-bottom').hide();
3

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

2 Likes