Bricks Builder 2 Row Header Hide On Scroll

No video

Bricks Builder 2 Row Header Hide On Scroll

Рет қаралды 3,865

Күн бұрын

Wondering what tools I use at my agency? check them out below!
Bricks Forge: bricksforge.io...
Meta Box: metabox.sjv.io...
Automatic CSS: automaticcss.c...
Fathom GDPR Analytics: usefathom.com/...
Vultr Servers: www.vultr.com/...
Fluent Forms: fluentforms.co...
Slim SEO: slim-seo.sjv.i...
Rank Math: rankmath.com/?...
WP Code Box: wpcodebox.com/...
GridPane Hosting: gridpane.com/?...
Rank Math: dominate.apert...
In this video, I will show you how to use the Bricks Builder sticky header on scroll with a two row header layout. All you need is a bit of custom CSS to get the job done
Desktop Breakpoint - Top and Bottom Row
.scrolling root{
transform: translateY(-45px);
}
Mobile Landscape Breakpoint - Bottom Row Only
.scrolling root {
transform: translateY(0px);
}

Пікірлер: 13

@wppagebuilders 24 күн бұрын

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!

@aperturedigitalmarketing 24 күн бұрын

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.

@pr12WingYin Жыл бұрын

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!

@jwalkonline Жыл бұрын

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

@aperturedigitalmarketing Жыл бұрын

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.

@DigitalMediaSpark 3 ай бұрын

Can you share any tutorial?

@iamanty Ай бұрын

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?