4

Okay so I want the titlebar to not be inside the main window but rather a bar on top of it which goes transparent when not hovering over the main window or said titlebar.

I have an example from another electron app here.

So does anyone have any Idea how I could create something like this? I thought about creating a second window but I think that isn't going to work. But someone else has made it so it must be possible

2 Answers 2

9

You need a transperent frameless Window, with grid or flex layouted titlebar and container area.

const {BrowserWindow} = require('electron')
let win = new BrowserWindow({transparent: true, frame: false})
win.show()

Check out the Electron Docs with crossplatform hints about transperent windows.

The you can then add or remove a class on the title bar to make it appear/disappear. The titlebar element should have the css property -webkit-app-region: drag

enter image description here

You should consider to fill out the non-visible area of that window with the content, also the perferct usecase for a little animation. Otherwise it may block off a application behind it, and the user has no idea why. Otherwise you need to manage the click forwording manually via:

win.setIgnoreMouseEvents(true)

Check out the Electron Docs on the matter since the forwarding can get pretty complex.

3
  • Hey thanks man that was already what I searched for. But I have still some stuff I can't figure out related to that. I hope you can help: 1. When using the jQuery fadeout to make it invisible, the body snaps up to it's 100% wich looks kind of ugly. When I just change opacity it works, but is still clickable. Example: imgur.com/a/SbOh96q 2. It looks ugly when the titlebar disappears, cause of rounded corners. According to internet the window should be with no radius on the edges when it is frameless and transparent. I there a way i can make hard edges? May 30, 2018 at 7:53
  • I would encourage you to use CSS animations and bind them to the height of the titlebar. if you use flexbox for example the content will automatically adjust to the proper height then. "Hard-edges" refere to regular ones, just remove the border-radius property.
    – Hans Koch
    May 31, 2018 at 18:46
  • Okay I got the hiding of the titlebar working. Hard edges are not the regular ones though. I am not talking about the edges of the div but actually the edges of the electron window. Those do not have a border-radius property and I want to change that. So how can I change that? Thanks for your help Jun 4, 2018 at 11:01
0

In case you want to hide the title bar and the menu bar and keep the window rounded corner.

new BrowserWindow({
        titleBarStyle : "hidden",
        ...
    });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.