How to Create a Simple Toggle-Based Overlay Header in Bricks Builder

Overlay headers are very modern and visually appealing. Unfortunately, they make websites more difficult to manage because they require special design considerations and potentially limit what you can do with hero sections.

BUT ... what if we could selectively apply an overlay header style to a given page while retaining a standard header on all other pages by default? That would be very powerful!

AND ... what if we could choose between an overlay header and a traditional header without having to manage two separate headers? That would be way better!

That's exactly what I'm going to show you how to do in this tutorial. And you'll learn some other great stuff along the way, like using and styling data attributes, Metabox custom fields, Bricks dynamic data, Bricks conditions, and more.

00:00 Intro
00:46 Example
05:10 Getting Header Template Ready
06:46 Creating a Toggle With Metabox Custom Fields
09:50 Data Attributes
14:30 Styling the Data Attribute
20:44 Swapping the Logo
26:40 Wrap-Up

[markpeters]

I can't stop watching these vids. No nuggets here, it is a freaking gold mine

[reufjaha]

Amazing tutorial Kevin, before I was creating multiple headers lol.

[simonkerridge]

Brilliant! As a Brit known for understatement, I don't say that lightly. Learning so much since I discovered your videos. Thank you. 🙂

[interculturalcommunication]

Shared this video with my intern today. One year later this video is still pure gold.

[FernandoArbex]

Man, your tutorials are pure gold.
Thank you a lot.

[wppagebuilders]

Thank you for this incredibly detailed tutorial on creating a toggle-based overlay header in Bricks Builder! Your step-by-step approach makes it easy to follow along, and the explanation of the importance of flexibility between standard and overlay headers is spot on. The use of data attributes and CSS for dynamic styling was particularly enlightening. This will definitely save time and effort in future projects. Looking forward to more of your insightful tutorials!

[kareem]

Thank You! ^__^ Diamond. You literally translated our needs, , requests, thoughts to become a true event. Much appreciated.

[JubranZakri]

Kevin, I am extremely grateful for your fantastic tutorials.

[isaurasotoca]

Really interesting! Getting rid of duplicate headers from now on 😊 Thanks Kevin!

[silentphil]

Awesome! lots of gold in here thanks Kevin

[VinceBalk]

GOAT! Man I love your tutorials. Thanks for sharing so much knowledge with us Kevin!

[johnanoh]

Wonderful! out-of-the-box-thinking solution to the double header dilema. Thank you!

[ElementoryMyDearWatson]

Your channel is an utter goldmine for learning and advancement. Thank you so much for your generosityand passion.

[HayleyHagen]

Wow...learn something new every time I watch your videos. Thank you for sharing your knowledge 🙂

[sumerianbrother]

TY Once Again! Nuggets all over the place! Cheers!

[davidwalls]

Kevin, I'm really not sure where to start. This video was PURE GOLD! I've never thought of using toggles, logic, and SCSS styles like this EVER. I watched this video 2x just to make sure I didn't miss anything and I'll probably watch it a few more times in the future when I'm developing future sites.

[ocbroadband]

Always great stuff. I shake my head everytime I see new stuff like this and my head just explodes with things I start thinking I can now potentially do.

[AmandaLucaseu]

Love the video Kevin - upping my chump free game one tut at a time 😂

[steveclark]

Great tutorial, as always. Learn something new with every single video!

[bramvandinteren]

Glad you point out that custom field glitch at 23:00, been having troubles with that in the past aswell. Great video as usual!