Skip to main content

Mobile Navigation Color

The colour a phone or tablet browser paints its own address bar and status bar, so the browser chrome matches your site instead of sitting in grey above it.

The top of a phone screen whose status bar, with the time, signal, Wi-Fi and battery icons, is painted the site's blue instead of the browser's grey, outlined in orange

Where: Theme Options > Theme Design > Mobile Navigation Color. It is under Theme Design, not Header.

Theme Options with Theme Design expanded in the section list and Mobile Navigation Color highlighted, beside the Mobile Navigation Color panel: Navigation / Status Bar Color and its dark mode counterpart, both blank

Theme Design > Mobile Navigation Color: Navigation / Status Bar Color and its dark mode counterpart

Both fields are empty by default, which leaves the browser on its own colours.

  • Navigation / Status Bar Color: the colour in light mode.
  • Dark Mode – Navigation / Status Bar Color: the colour while the phone or browser itself is in dark mode. It follows the device setting, not the site's own dark mode switch.
    • Leave it blank and fill the first field: the light colour is used in both modes.
    • Fill only this one and it does nothing. With the first field blank, no colour is sent to the browser at all.

Only browsers that honour the theme colour meta tag change colour. So check it in a phone browser, not in a narrow desktop window.