SOLVED: Z-Index issue with 1.5.1

Bugs
1

Bricks Version: 1.5.1 RC
Browser: Safari
OS: macOS
URL: (a link to a page that illustrates the issue would be really helpful)

Create a header template with a logo, menu, a button and no bg-color. Give it a negative margin-bottom of its own height and a z-index of 1.

Add the header template to a page, add a new section to the page, give that section a background color. With a z-index of 1 for the header, the header content should be visible above the added section with the background. For me under 1.5.1 it’s not. Back to 1.5 and it works like it should.

2

Hi Darian,
Thanks so much for your report!

This is because in Bricks 1.5, every element without exception had the position: relative property. This was removed in 1.5.1. You’ll get the same result if you apply the z-index to #brx-header. However, I would recommend a higher value than 1.

Best regards,
timmse

1 Like
3

Thanks @timmse . And that can only be done via custom code? There seems to be no way to add it to the header template itself.

4

Correct, this is the case since Bricks 1.3.7:

Best regards,
timmse

5

I can confirm, the Z-Index in the header template is still not being recognized. I placed the following code in the custom code settings > CSS in bricks

#brxe-egjvnz {
z-index: 100;
}

Besides: a z-index not being published in a template if I set the z-index there, boggles my mind in the first place.

6

Hi Alex,
Can you provide me with a live link?

7

Hey timmse,

after deleting cache several times, it is working now: https://b2cf1eyoj4.myrdbx.io/

Can you maybe help in this topic regarding a scrolling effect vor the menu: Transparent header that turn sticky and its background to blurry transparent when scrolling - #4 by alexven

8

Ok, great! I just replied in the other thread :slight_smile: