Firefox Customs

4 readers

10 users here now

Chat with us!

Post your unsupported Firefox customizations here!

From the makers of r/FirefoxCSS

Links

Related

Firefox

Rules

Posts must have flair!
Posts cannot be memes/shitposts. They should be about Firefox customization with CSS.
Please be civil. Bear in mind that many users come here for help and would be turned off by insults and rudeness.
When posting large amount of code use a service dedicated to hosting text snippets, such as pastebin, hastebin, github gist or equivalent. Relatively short snippets can be wrapped in code-block for inline viewing.
Do NOT use url-shorteners or link to compressed downloads (such as zip or rar) when sharing code.

founded 1 year ago

MODERATORS

[email protected]

Help with z-index in hamburger menu and new Firefox Sidebar (lemmy.world)

submitted 1 week ago by [email protected] to c/[email protected]

2 comments fedilink hide all child comments

Issue in Firefox beta
hi, I set a z-index in 2 elements but don't work and I can't solve it.
I have this code to move the hamburger menu to left top side:

:root:not([chromehidden~="toolbar"]) #PanelUI-button {
        position: fixed;
        display: flex;
        top: var(--windowed-top-padding, 0px);
        left: 0px !important;
        z-index: 3 !important;
    }

and I have this code to move higher the Firefox Sidebar:

:root:not([sizemode="fullscreen"]):has(sidebar-main:not([expanded])) {
        & #sidebar-main {           
                /* Bakground-color necessary for gradient line color */
            background-color: var(--lwt-frame) !important;
                /* Top-bottom margins */
            padding-top: var(--padding-top-left-sidebar) !important;
                /* Gradient line */
            margin-top: calc( -1px - var(--bookmarksbar-height-personal, 0px) - var(--toolbar-height-personal) -
                             var(--Space-before-gradient-line)) !important;
            border-inline-end: 1px solid red !important;
            z-index: 2 !important;
        }
    }

the problem is the hamburger menu stay behind the Sidebar, I wonder why the z-index don't work.

top 2 comments

sorted by: hot top controversial new old

[–] [email protected] 1 points 1 week ago (1 children)

I can't check right now, but I'm pretty sure that is because navigator-toolbox has lower z-index than sidebar. So because the panelui button is inside navigator-toolbox it ends up getting covered by sidebar no matter what zindex it has.

[–] [email protected] 1 points 1 week ago* (last edited 1 week ago)

ooooh, I wonder if I give a higher zindex to all the navigator-toolbox it could cause random problems but I will try.

Edit: Sadly changing the z-index to all navigator-toolbox cause other issues in my theme and I should change a lot of code, hate this Firefox change jeje.

Edit2: I tried this code and seems to work in some cases, I wonder what damage this could cause but the time will say:

#navigator-toolbox{
        z-index: unset !important;
    }