Michael
December 13, 2021, 9:34am
1
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
timmse
December 13, 2021, 9:48am
2
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
Michael
December 13, 2021, 12:04pm
3
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
timmse
December 13, 2021, 12:48pm
4
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:
Michael
December 13, 2021, 1:01pm
5
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
Michael
December 13, 2021, 1:21pm
7
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
timmse
December 14, 2021, 8:48am
8
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
Michael
December 14, 2021, 9:08am
9
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?
timmse
December 14, 2021, 10:16am
10
I believe I got it now
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.
Michael
December 14, 2021, 11:36am
11
Perfect Stefan, thank you!
timmse
January 28, 2022, 6:42pm
12
Hi Michael,
this issue is fixed in Bricks 1.3.7!
You can get rid of the custom code now
Best regards,
timmse