Question: can hovering titlebar be used to hide/unhide navbar?

[BillyJoeJimBob]

My understanding is the optional separate titlebar is part of the OS and cannot itself be modded by CSS. Can it be used when hovered to hide/unhide other firefox elements such as the navbar?

The firefox titlebar in macOS is useful for containing the windows max/min controls in a narrow bar when the tabbar and navbar is hidden. So far I have been able to add a blank space below the titlebar, hovering that blank space causes the navbar to drop down over the top of a website (instead of moving the site down), which is what I want, but the blank space is either very narrow and difficult to hover, or thicker and unsightly and takes up space which defeats the point of using the titlebar instead of just using a compact navbar, see attached images. Also, thank you for this very helpful CSS repository.

navbar collapsed:

navbar drops down when blank space below titlebar is hovered:

mov:

https://user-images.githubusercontent.com/11702508/226217452-e08a77bc-60f7-4c15-89b7-61097d9f0943.mov

[MrOtherGuy]

Well, it's actually sort of possible... kind of.

So, the native titlebar isn't part of Firefox DOM. So that means that when your cursor is over the native titlebar then no part of the Firefox is hovered. Thus, you could make your style only apply when the window root is hovered. For example you could do this:

:root:hover #nav-bar{
  background: #f00 !important;
}

Here, whenever your cursor is over any area within Firefox window then nav-bar will be red. But as soon as cursor leaves that area - for example because you moved it over the native titlebar - then the styling is lost. Of course that means that the color is also lost when your cursor is outside the actual window, like when you are working with some other window.

But you cannot make the styling only happen when cursor is over the native titlebar area of the Firefox window.

This is how it works on Windows10 at least - I really have no clue about macOS - I guess it could be different somehow, but for the purposes of this I'd assume it works the same.

[BillyJoeJimBob]

Thank you for your reply. Maybe a workaround would be to have the navbar hide only when the cursor or focus is on the main page of the browser, that is the web page itself, and to have the navbar unhide or stay unhidden when the cursor and/or focus is outside of the main page, such as outside of the browser itself or when the focus is on the navbar or other toolbars.

[MrOtherGuy]

I'm afraid that doesn't sound possible to do. At the very least it would require support for :has() selector which Firefox doesn't have currently and even then it might behave unexpectedly with changing focus.

[BillyJoeJimBob]

OK, thanks. I hastily cobbled together the following frankenstine code but it does hide the navbar when the cursor/focus is over the main page and causes it to reappear when the cursor hovers outside of the browser or remains over the descended navbar, however it pushes the whole site down when the navbar drops down. Kind of janky though.

https://user-images.githubusercontent.com/11702508/226808774-ab98824f-36ac-4001-8f1f-a1d99364a845.mov

`/------------toolbar autohide--------------------/ :root:hover #nav-bar{ / customize this value. / --navbar-margin: -50px; margin-top: var(--navbar-margin); margin-bottom: 0; z-index: -100; transition: all 1s ease 1s !important; transition-delay: 1s !important; opacity: 0; }

navigator-toolbox:focus-within > #nav-bar,

navigator-toolbox:hover > #nav-bar

{ margin-top: 0; margin-bottom: var(--navbar-margin); z-index: 100; opacity: 1; }`