This tutorial on setting up a sticky header with Brix Builder is really informative! The way it explains handling two rows and custom CSS for different breakpoints is clear and helpful. It's nice to see the step-by-step breakdown of how the JavaScript classes interact with the header, and the troubleshooting tips are definitely a bonus for anyone trying this out for the first time. Great work on simplifying what could be a complex topic!
Thanks very much for the kind words! I still use this method today on all sites that require a two row header... It definitely withstood the test of time for me.
Really useful, as I'm currently learning bricks and revamping my company website. Thanks for sharing and keep up the work! Very greatful to have found this!
Hi John. Just wanted to offer up what I do... I simply create as many containers as I need (1 for each row), set the heights, colors, elements, etc. inside each container and of course set the sticky header settings for the template. I then use a combination of conditions and interactions to show and hide the "row" containers as desired. Because this techique uses CSS display:hide on the container, the "row" collapses and expands without the need to use custom CSS transforms as you have done in this video. Just makes it easier without writing custom code. Also, using this technique I have been able to use "Options/Settings/user prolfile" fields to allow users to pick and choose what they want to show or hide. Also great that the display conditions available in Bricks makes it possible to come up with all kinds of use cases since it provides so many dynamic data features. Hell, I can display a special container filled with icons or buttons to perform specific actions for specific page term, category, tag or meta data or even custom field. Think likes, add to favorite, etc. Thanks for making this awesome video, please keep sharing your knowledge. -Sam
Thanks for the comment Sam. I'll have to check out the interactions interface it looks like! Thanks for the tip and keep them coming. We get better by learning together.
This sounds like a great solution, can you expand on how you achieve hiding containers with interactions and conditions when the header is sticky/scrolled?
This tutorial on setting up a sticky header with Brix Builder is really informative! The way it explains handling two rows and custom CSS for different breakpoints is clear and helpful. It's nice to see the step-by-step breakdown of how the JavaScript classes interact with the header, and the troubleshooting tips are definitely a bonus for anyone trying this out for the first time. Great work on simplifying what could be a complex topic!
Thanks very much for the kind words! I still use this method today on all sites that require a two row header... It definitely withstood the test of time for me.
how about using clamp instead of breakpoints?
To target the header's child now its .scrolling %root%
Really useful, as I'm currently learning bricks and revamping my company website. Thanks for sharing and keep up the work! Very greatful to have found this!
Thank you! This works great
Great to hear! I love when stuff just works haha.
Hi John. Just wanted to offer up what I do... I simply create as many containers as I need (1 for each row), set the heights, colors, elements, etc. inside each container and of course set the sticky header settings for the template. I then use a combination of conditions and interactions to show and hide the "row" containers as desired. Because this techique uses CSS display:hide on the container, the "row" collapses and expands without the need to use custom CSS transforms as you have done in this video. Just makes it easier without writing custom code.
Also, using this technique I have been able to use "Options/Settings/user prolfile" fields to allow users to pick and choose what they want to show or hide. Also great that the display conditions available in Bricks makes it possible to come up with all kinds of use cases since it provides so many dynamic data features. Hell, I can display a special container filled with icons or buttons to perform specific actions for specific page term, category, tag or meta data or even custom field. Think likes, add to favorite, etc. Thanks for making this awesome video, please keep sharing your knowledge. -Sam
Thanks for the comment Sam. I'll have to check out the interactions interface it looks like! Thanks for the tip and keep them coming. We get better by learning together.
Can you share any tutorial?
This sounds like a great solution, can you expand on how you achieve hiding containers with interactions and conditions when the header is sticky/scrolled?
Thanks. I'm new to Bricks and this was the perfect solution, after looking at some other ways of doing it.
Thanks a lot ! Tthis video will help me a lot! 👍