How to hide the top Navigation bar which is running based on Web Application

Question

I want to hide the top navigation bar as I showed in the below image.

Answer 1

This looks like you have this as part of your layout, not the browser address bar, which is what I think Mathias confused.

You can use a CSS media query to detect how your application is being rendered.

This is some of the code I use in my Add to Homescreen library. You can use these media queries and just add the CSS to your CSS to hide that header if you want it suppressed when the application is opened from the homescreen.

            window.matchMedia( "(display-mode: fullscreen)" ).matches ||
            window.matchMedia( "(display-mode: standalone)" ).matches ||
            window.matchMedia( "(display-mode: minimal-ui)" ).matches;