All Collections
PWA Questions
Using Window Controls Overlay in your app manifest
Using Window Controls Overlay in your app manifest

Learn what display_override: ["window-controls-overlay"] is and how you can take advantage of it to make your PWA feel more native

Kevin Basset avatar
Written by Kevin Basset
Updated over a week ago

If you're using Progressier, choosing Window controls overlay as a Desktop display mode at App Manifest > Preferences will add the following line to your app manifest:

display_override: ["window-controls-overlay"]

What it's for

Enabling this feature allows you to override the title bar with your own controls. The title bar is specifically the section in red below (macOS and Windows):

When the feature is enabled, the area in red above disappears completely. This allows you to make your PWA feel more native by replacing this section with custom controls for your app. Here are some examples of interfaces you can build with this feature:


Audio controls:

A search bar:

A menu bar:

How to position your own controls

Use CSS environment variables to position your own controls where the title bar would otherwise appear. Also, make sure its background color is the same as the theme_color of your app.

#your-own-window-controls { 
position: fixed;
left: env(titlebar-area-x, 0);
top: env(titlebar-area-y, 0);
width: env(titlebar-area-width, 100%);
height: env(titlebar-area-height, 33px);

You may also want to hide these controls completely if your app is not open in its own window or if the standard title bar is still visible. This can be achieved by hiding your controls by default and only displaying them when the display-mode becomes window-controls-overlay:

#your-own-window-controls { 
@media (display-mode: window-controls-overlay) {
#your-own-window-controls {
display: flex;

Did this answer your question?