9mo ago

Help with z-index in hamburger menu and new Firefox Sidebar

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.

2 comments

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.
- 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; }