I would like to change the color of the Android navigation bar on the web when I add the page on the Android home screen (Progessive Web App) but when I open the PWA, the color of the Android navigation bar is black and I want Change the color to white. In the manifest, you can change the color of the theme and I do, but still follow the color black.
Is it possible to do that?
I mean the Android navigation bar, not the notification bar.
As far as I know it is currently not a PWA supported feature.
You can add a meta tag to your HTML page.
<meta name="theme-color" content="#225577"/>
You can play with manifest.json and set "theme_color":"#000000", "background_color": "#000000" - your browser might pick those colors and apply them to the nav bar (or might not, Samsung's standard browser used to ignore this setting and never changed nav bar color). It seems there's still no such feature in PWA (which existis in Android native apps) that allows specifing navbar color alone.
The color of the navigation bar doesn't work with dark theme. Change to light theme and it will work.
I believe there is still no workaround for this in 2023.
The Android navigation bar's background color in PWAs depends on the theme setted in your phone settings. If your phone is set as dark mode, it will appear dark. Otherwise, it will appear as white in PWAs.
That's why it is probably a good idea to add toggle theme functionality in your PWA.
I'm creating a Chrome Extension and when installed it, Chrome creates an icon next to the omnibar. The icon provides no functionality and I'd like to remove it form such a prominent spot. I know I can't fully hide the icon, but can I set the icon to show in the Icon Overflow area under the hamburger icon by default?
I have a site but in Iphone device with safari for example there a bar with button in the bottom
Like this:
The image of the right.
And in this site : https://prismic.io/ if you clic on the menu burger this navigation bar is blocked. I want this but I don't know how to do.
If you have an idea ? thanks
My Chrome browser automatically got updated and now it displays a weird device bar on top as shown in the screenshot below:
Any ideas how to remove the bar?
Open Settings (via the triple horizontal bar icon on the very right of the address bar).
Then open 'More Tools' and then 'Developer Tools'
In the tool bar of the developer panel there will be a blue highlighted smartphone icon. Click that to get rid of the device ruler.
I am implementing a mobile website, which has menu link and contact phone at the top of the page with CSS position:fixed.
Unfortunatelly, Chrome on iPhone has a behavior that when I scroll up, the Chrome URL bar appears at the top of the page over my menu and I have to scroll down or wait some 5 seconds for hiding the Chrome bar and accessing the menu again.
Is there some option to disable this mobile chrome behaviour or some workaround?