-1

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

Image

Rok Kralj
  • 46,826
  • 10
  • 71
  • 80
Kaushik Nagani
  • 1
  • 4
  • That is put there by the browser to be helpful to the user. I know Chrome adds one and I believe the PWA developer has no control over it. – Mathias Sep 30 '20 at 15:49

1 Answers1

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;
Chris Love
  • 3,740
  • 1
  • 19
  • 16