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