Make a Transparent Titlebar Draggable (macOS only)

By default, a tranparent title bar is not draggable, you will need to add some CSS styles to your site to make the window draggable.
You can give an element the ability to drag the window by using-webkit-app-region: drag in css.
If you want certain elements marked as non-draggable then you can use-webkit-app-region: no-dragSo, you might end up doing something like this:
1
html.todesktop .header {
2
  -webkit-app-region: drag;
3
}
4
​
5
html.todesktop .header .nav {
6
  -webkit-app-region: no-drag;
7
}
Copied!
The html.todesktop class pre-selector will ensure that the css is only applied when running as a desktop app. You can learn more about this here:
💄
Add Custom CSS to your Desktop App

Customizing your app - Previous

Add Custom Javascript to your Desktop App

Next - Javascript API

Introduction

Last modified 2yr ago

Copy link