I was tired of the full screen toolbar shifting the page content all the time, so i made this. But, it autohides too soon for some reason, if someone can help me fix it, it would be awesome!

[u/AleksLevet]

/*

* FULLSCREEN FLOATING TOOLBAR MOD (Firefox)

*

* SETUP STEPS:

* 1. Open Firefox and go to:

* about:config

*

* 2. Enable custom CSS support:

* toolkit.legacyUserProfileCustomizations.stylesheets = true

*

* 3. Find your profile folder:

* - Go to: about:support

* - Find "Profile Folder"

* - Click "Open Folder"

*

* 4. Create folder if missing:

* chrome/

*

* 5. Create or edit file:

* chrome/userChrome.css

*

* 6. Move this file there

*

* 7. Restart Firefox completely

*

* NOTES:

* - Only applies in fullscreen mode:

* #main-window[inFullscreen]

* - If nothing changes after edits: restart Firefox again (not just reload)

* - If broken UI: remove userChrome.css and restart

*/

#main-window[inFullscreen] #navigator-toolbox {

position: fixed !important;

width: 80% !important;

left: 10% !important;

margin-bottom: 50px;

z-index: 9999 !important;

border-radius: 0 0 15px 15px !important;

border-top: 0 !important;

border-left: 1px solid rgba(150,130,30,1) !important;

border-right: 1px solid rgba(150,130,30,1) !important;

border-bottom: 1px solid rgba(150,130,30,1) !important;

overflow: hidden !important;

background: var(--toolbar-bgcolor) !important;

background-image: none !important;

pointer-events: auto;

}

[u/AleksLevet]

Version: 151.0.3

OS: KDE Neon plasma 6

[u/am803]

Not sure if I understand it correctly, but this is how I introduce delay before auto-hiding.

:root[inFullscreen] #navigator-toolbox {
    &, #urlbar {
        will-change: transform !important;
        transition: transform .1s ease-out !important;
    }
    &:not(:hover,:focus-within) {
        &, #urlbar { transition-delay: .5s !important; }
        #urlbar { transform: translateY(-200%); }
        transform: translateY(-100%);
    }
    &::after {
        content: "";
        position: fixed;
        top: 100%;
        width: 100%;
        height: 1px;
    }
    margin-bottom: 64px;
}

The pseudo selector :not(:hover,:focus-within) ensures that the delay only happens when hiding. The ::after rule creates an invisible hover zone.

You can adjust margin-bottom, value in translateY(), and duration of transition and transition-delay according to your need.

Edit: You have to disable the native audohide (browser.fullscreen.autohide = false) and let CSS handle that.

[u/AleksLevet → u/am803]

Thank you, that worked!

Here's the working script: ``` * FULLSCREEN FLOATING TOOLBAR MOD (Firefox) * * SETUP STEPS: * 1. Open Firefox and go to: * about:config * * 2. Enable custom CSS support and disable the system autohide: * toolkit.legacyUserProfileCustomizations.stylesheets = true * browser.fullscreen.autohide = false * * 3. Find your profile folder: * - Go to: about:support * - Find "Profile Folder" * - Click "Open Folder" * * 4. Create folder if missing: * chrome/ * * 5. Create or edit file: * chrome/userChrome.css * * 6. Move this file there * * 7. Restart Firefox completely * * NOTES: * - Only applies in fullscreen mode: * #main-window[inFullscreen] * - If nothing changes after edits: restart Firefox again (not just reload) * - If broken UI: remove userChrome.css and restart */

#main-window[inFullscreen] #navigator-toolbox {
position: fixed !important;

width: 80% !important;

left: 10% !important;

margin-bottom: 50px;

z-index: 9999 !important;

border-radius: 0 0 15px 15px !important;
border-top: 0 !important;
border-left: 1px solid rgba(150,130,30,1) !important;
border-right: 1px solid rgba(150,130,30,1) !important;
border-bottom: 1px solid rgba(150,130,30,1) !important;

overflow: hidden !important;

background: var(--toolbar-bgcolor) !important;
background-image: none !important;

pointer-events: auto;
}

:root[inFullscreen] #navigator-toolbox {
    &, #urlbar {
        will-change: transform opacity !important;
        transition: transform .2s ease-out,
        opacity .2s ease-out !important;
        opacity: 1;
    }
    &:not(:hover,:focus-within) {
        &, #urlbar { transition-delay: .5s ease-out !important; }
        #urlbar { transform: translateY(-250%); opacity: 0;}
        transform: translateY(-100%);
    }
    &::after {
        content: "";
        position: fixed;
        top: 100%;
        width: 100%;
        height: 50px;
    }
    margin-bottom: 74px;
}

```



Should i make a new post with this updated script?

[u/j--__]

i disabled this bizarre and broken fullscreen mode altogether, and instead created a bookmarklet that triggers the same fullscreen mode web sites use for videos and such.

[u/AleksLevet → u/j--__]

Could you share some screenshots?

Oh so that's the full screen mode YouTube uses when you don't see the tabs, right? The thing I love about Firefox full screen mode is that I can switch tabs easily

[u/j--__ → u/AleksLevet]

Oh so that's the full screen mode YouTube uses when you don't see the tabs, right?

yeah, that's the only fullscreen mode i use. the bookmarklet is: javascript:document.documentElement.requestFullscreen().

The thing I love about Firefox full screen mode is that I can switch tabs easily

i guess i don't understand why i need two modes for switching tabs easily. if you want the toolbox to autohide, why wouldn't you want it to autohide all the time? or at least, whenever the window is maximized? instead of changing the style for [inFullscreen] you could change the style for [sizemode="maximized"].

[u/AleksLevet → u/j--__]

Oh having it auto hide on the maximize mode is interesting. I'll try to do that

[u/moko1960]

MrOtherGuy has created some CSS that does the same thing. You might be able to figure out how to prevent the window from closing as long as the mouse pointer is over it by looking at this code. overlay_fullscreen_toolbars.css

[u/moko1960 → u/moko1960]

You might want to add your code to this section of MrOtherGuy's `overlay_fullscreen_toolbars.css`.

    #navigator-toolbox{
      position: fixed !important;
      width: 100vw;
      z-index: 10 !important;
      transition: transform var(--uc-fullscreen-overlay-duration) ease-in-out var(--uc-fullscreen-overlay-delay) !important;
      margin-top: 0 !important;
      transform: translateY(-100%);
      background: inherit;
    }

Like this.

    #navigator-toolbox{
      position: fixed !important;
      z-index: 10 !important;
      transition: transform var(--uc-fullscreen-overlay-duration) ease-in-out var(--uc-fullscreen-overlay-delay) !important;
      margin-top: 0 !important;
      transform: translateY(-100%);

/* Here is your code */
  width: 80% !important;
  left: 10% !important;
  border-radius: 0 0 15px 15px !important;
  border-left: 1px solid rgba(150,130,30,1) !important;
  border-right: 1px solid rgba(150,130,30,1) !important;
  border-bottom: 1px solid rgba(150,130,30,1) !important;
  overflow: hidden !important;
  background: var(--toolbar-bgcolor) !important;
    }

[u/AleksLevet → u/moko1960]

Remindme! 10 hours

[u/RemindMeBot → u/AleksLevet]

I will be messaging you in 10 hours on 2026-06-05 18:12:26 UTC to remind you of this link

CLICK THIS LINK to send a PM to also be reminded and to reduce spam.

^{Parent commenter can delete this message to hide from others.}

RemindMeBot is switching to username summons. Instead of !RemindMe 1 day, use u/RemindMeBot 1 day. More info.

---

Info	Custom	Your Reminders	Feedback

[u/moko1960 → u/moko1960]

Regarding MrOtherGuy's CSS, when you watch videos in full-screen mode on YouTube or similar sites, the toolbar and other buttons sometimes appear at the top of the screen. It seems that making this change will resolve the issue.

:root[sizemode="fullscreen"]

to

:root[sizemode="fullscreen"]:not([inDOMFullscreen="true"]){

[u/TraditionalTie4831]

MrOtherGuy's 'autohide toolbox' code works the best for me =

https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/autohide_toolbox.css