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.

If you love content like this, then you'll definitely want to check out my Inner Circle: https://digitalambition.co/inner-circle/

If you want the best way to manage custom CSS and even write SCSS for your builds, get WPCodeBox: https://geni.us/uu8jqqf

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