Not so much a bug but in testing 1.8-beta 3 I realized the z-index must be set very high as the toggle for mobile requires a z-index of 1001 per the Bricks Academy article in order to not be hidden by the content frame when opening. I guess my question is… why so high? Shouldn’t the default z-index not need to be so high?
I was surprised when I needed to set that property to such a high value and just wanted to start a discussion on that in case I’m overlooking something or if that particular behaviour can be improved in the future.
Can’t answer for Bricks team, but I think it’s likely the exact same reason that we also have our BE OffCanvas element at 1001 z-index as the default…
That reason being that many plugins, specificially some Woocommerce elements, sliders, forums, etc often have very high indexes to try to ensure their content is always visible (often those plugins need to need to work with any theme).
But with theme elements like OffCanvas’ or Mobile Menus, it almost definitely needs to be above all that stuff as the idea is that it needs to be in front of all other content on the page when opened.
And as these elements can be added anywhere on a page (and Bricks’ header doesn’t have a default z-index, so it’s a ‘flat layout’ where z-index on individual elements can matter a lot), adding a high default z-index means less people will bump into these z-index issues and not have to worry about it. People will be adding sticky headers, animations with transforms etc, all this stuff pushes those elements to the front layer, but they still need to be behind these main theme elements when they open.
I recently encountered a use-case where the documented/recommended z-index became an issue. I had a Search icon above the mobile menu icon, and when it’s set to Full Screen, the Close icon for the Search function was being overlapped by the Menu icon. When I set the Search element to be a higher z-index, it suddenly dropped behind the header itself (that part I don’t quite understand but that’s what I experienced). For the time being I’ve worked around it by not setting the z-index on the menu toggle but instead shifting the dropdown to be below the nav toggle so that it isn’t covered up.
How it was working when I had the z-index set to 1001 on the nav menu Toggle element:
How it looks when I set the z-index of the Search element to 1002:
How it is working now that I’ve removed the z-index and simply lowered the menu instead so it doesn’t cover the toggle.
I really think this is wrong behaviour, and wondering if this would be seen as a bug at all. @Thomas, any possibility to review this?
