SOLVED: [Header] Transparent leaves different shades

Bricks Version: 1.3.6
Browser: Chrome latest
OS: Windows 11

Hey all,

I am sure I have seen this mentioned before but searched and could not find it.

When I make the header root container transparent it leaves the other divs and elements with darker shades. please see screenshot

Many thanks

Mick

Hi Michael,

how can I reproduce this? I added a background color to the outer container, saved, lowered the transparency, but I cannot see any shades.

Best regards,
timmse

Hi Stefan,

Its set as -

1 column (root) stretched & absolute
1 child column 1400px
3 grandchild columns (logo(auto width), nav, button(auto width))

Logo = PNG
Nav = set to transparent text
button set to outline / white

Header settings
Sticky header on scroll at 0px
text colour on scroll to white (for the nav)
background colour transparent and set to black 0.3 transparency on scroll

I think that’s everything notable

Kindest Regards

Michael

Hi Michael,

The problem is that the scrolling background color is applied to every .bricks container inside the header. I confirm that this is a bug.

You can fix this in the meantime by adding this to Bricks > Settings > Custom Code > Custom CSS:

#bricks-header.sticky.scrolling .bricks-container {
    background-color: transparent !important;
}

Best regards,
timmse

Ps: You don’t need that many container inside of your header to align your elements. This works as well:

Hey Stefan,

To be honest i used to do it this way but some reason find it easier to manipulate the header for better responsiveness with each element having its own div (mainly due to the logo and nav). I know its divception, I might give it another try.

Also very closely related, but the black 0.3 transparent colour on scroll (mentioned above) is not working, it is staying transparent. Should I open another ticket?

Thanks again bud.

p.s. elf for the win for the best Christmas film :stuck_out_tongue_winking_eye:

What do you mean with

?

This part, it is set to transparent and in header settings it is set to 0.3 black on scroll. But it is just stays transparent on scroll

Hey,

after or before applying?

#bricks-header.sticky.scrolling .bricks-container {
    background-color: transparent !important;
}

Can you provide a live link? Can’t reproduce it: https://vimeo.com/656483275/ef3928d8dd

I believe it was before and after. Do you have access to the help@ email, do you want me to ping you a log in link there?

I believe I got it now :face_with_raised_eyebrow:

I changed the custom CSS to:

#bricks-header.sticky.scrolling .bricks-container > .bricks-container {
  background-color: transparent;
}

Please take a look and let me know if the behavior is correct now.

Perfect Stefan, thank you! :clap:

Hi Michael,
this issue is fixed in Bricks 1.3.7!

You can get rid of the custom code now :slight_smile:

Best regards,
timmse