NO BUG: shadow Navbar not working on section with gradient or background color

Created a navbar with shadow on bottom. Works fine with a page with no background color.
But when I put a color on the first section background, or a gradient, the box shadow just disappears. You see it being loaded in the first second, but disappears right after.

Without bg-color or gradient

with color/gradient bg.

Well I wanted to put more pics but get message: New Users can only put two links… and also not upload pics. Will post it in reply

Settings of box shadow:

Shadow on other elements is working, see the cards

Hey @TheBrickLayer,

is there a chance to share a URL of the website, where I can see what is happening? It will be the easiest this way.

Thanks,
Matej

Hello Matej,

Yes there is. This is the website: Blogs – Słowianka-Izabela
Thank you that you want to look at it.

Hi,

Try to set z-index:1 or any other value to the header, so that it’s “above” the main content. That should make the shadow visible :slight_smile:

Let me know,
Matej

Hey Matej thanks a lot!
I see this seems like a BUG. When Bricks template header is chosen (my header section is: header-buttons__section), then it surrounds it with a header-id: brx-header. It seems that is not respecting the z-index I gave to my .header-buttons__section. So this seems like a bug right?

I cannot give the z-index on it by the editor, I need to make custom css for it, and that will be applied to every brx-header then. That shouldn’t work like that, what do you think? See picture, I applied the z-index=1 to my header section, it does not work.

I dont have a pencil to circle but you can see here the page css I added of the header and the result in the source.

Hi,

I’ll mark the topic as no-bug since I don’t think it’s a bug, but more like an improvement suggestion, to allow adding custom classes and styling easily to the header itself.

The thing is, what you are styling is the inner part of the header, so whatever z-index you set there, it will be only applied to the inner sections, not to the header itself.

Something like the code below should work if you add it in the Custom CSS field in Bricks settings.

header{
z-index: 1;
} 

But, I can not log this as a bug, since it works as intended, there is just no layout option for this.

Matej

1 Like