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

[@markpeters2254]

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

[@Gearyco]

💰

[@simonkerridge]

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

[@Gearyco]

🙏

[@reufjaha123]

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

[@FernandoArbex]

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

[@Gearyco]

🙏

[@interculturalcommunication3889]

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

[@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!

[@VinceBalk]

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

[@Gearyco]

My pleasure

[@kareem2928]

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

[@isaurasotoca]

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

[@JubranZakri]

Kevin, I am extremely grateful for your fantastic tutorials.

[@silentphil77]

Awesome! lots of gold in here thanks Kevin

[@ElementoryMyDearWatson]

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

[@Gearyco]

My pleasure!

[@johnanoh6099]

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

[@HayleyHagen]

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

[@Gearyco]

Happy to hear that!

[@sumerianbrother]

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

[@davidwalls2304]

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.

[@Gearyco]

Glad you liked it!

[@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.

[@steveclark4821]

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

[@morozara4962]

Awesome! I am actually learning.

[@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!

[@alexanderbeutl]

This Tutorial is awesome 🙌 Immediately impemented it on my page, since I also use an overlay header

[@osvaldoodon]

Thanks for such a great video 👏👏👏👏. Was exactly what I was looking for

[@jugibur2117]

I am not currently a Bricks user and was curious to see what could be done with it. What you showed was really fascinating and gave me a good insight, thanks for your effort!

[@Gearyco]

Glad you enjoyed it!

[@JaySolomonK]

The wizard of web design, thank you very much for sharing man

[@Gearyco]

My pleasure!

[@jerrycompanjen5325]

These are great! Please do more, love learning from you!

[@digwillhachi]

I always learn something from every video you put out. Amazing content!

[@PenaTechnologies]

Love your stuff man. Grateful that you have a passion for teaching as well!

[@AmandaLucaseu]

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

[@glennrabbypaulin1853]

I always love your tutorials. Keep posting please.

[@melissademayo7141]

So cool! Learned something new!

[@stripedgoat]

That's a neat way! Thanks for sharing!

[@RMSAnalyst]

Brilliant tutorial Kevin, as always! ❤

[@danstevens1974]

just found this - a great help. I did have to use !Important; in my CSS in some cases, but i'm assuming that is fine and normal!

[@Gearyco]

Hmm, shouldn’t be necessary

[@danstevens1974]

I could well be doing something silly! I'm using Appearance > Theme file editor > Bricks Child Theme: Stylesheet (style.css). Not idea if that's relevant or not.@@Gearyco

[@brianholt6083]

Another Awesome Tutorial...

[@wpeasy]

Typically and beautifully simple :) I still use Elementor with JetEngine for sites my clients will edit (I know one of your least favorites).. I just checked to see if I can do the same thing and you can. Basically with the Attribute, - you select JetEngine->Custom Field - set the "Before" to "data-overlay-header|" - set the fallback to "data-overlay-header|Standard" I do love the Bricks way of handling Dynamic Data, but in this case it works :)

[@Atz22]

Hey Kevin - nice video and interesting approach to teach a different method but I think for this specific use case using bricks I think it's easier and better to have different header templates for the home page and another for other pages..will give you much finer control but as a general technique video it's very good 🙏😎

[@Gearyco]

How will that give you finer control? You’ll have duplicate elements to manage, including duplicate menus.

[@fredchams1052]

Brilliant and effective as usual 🤩

[@PaulShadwell]

This is so helpful and makes perfect sense. The only thing is the nead for another plugin for CSS. Can't we add this to the CSS part of the header. I know it won't be SASS.

[@PicSta]

Great tutorial. Thanks for that. :)

[@korduran]

Another great "chump-free" tutorial.

[@ReubenHochstetler]

Great tutorial.

[@obito-269]

thank you!👍

[@BGdev305]

good one

[@azuzaazuza]

Gold indeed!

[@SridharKatakam]

Using 2 separate headers and making one be output depending on the value of a custom field is a perfectly scalable and maintainable method imo. We are, after all, using the same nav menu.

[@Gearyco]

Sure, it’s just harder to manage imo and creates more opportunities for inconsistencies (eg update one and forget to update the other).

[@SridharKatakam]

There is nothing to update in the other overlay header once it is set up. The light version of the logo is not something that typically changes, and neither are the nav menu items because they come from the same WP menu the regular version of the header also uses.

[@Gearyco]

That's not always true. Lots of people are using the Bricks mega menu system which doesn't use the WP menu system at all. Of course, you could make that its own template and insert it with a template part, but then you have template inception which is always annoying when you go to edit the header. And depending on design, the header could have a lot more information. Phone numbers, addresses, secondary links, sale banners etc. I'm not saying the way I showed is the only way to do it, but it's a simple and elegant solution that cuts out a lot of potential hassle.@@SridharKatakam

[@HamedHaidari]

Great compliments Kevin. Your videos and explanations are truly amazing. I have one question, if I set Toggle-based Overlay header, and at the same time I have sticky header. Can I set condition to the Sticky header to switch to "standard format? Thanks

[@Gearyco]

Not sure I understand the use case.

[@daviddemastus]

Thanks for this! Super helpful. If I were to create 2 different hero style options with the same type of toggle, would I create 2 different hero sections in my Page template and use conditional logic to show/hide the hero section? Or should I use the same data attribute method? I'm not sure it would be efficient to use custom css for a hero section, especially since I can just use Bricks to natively style it.

[@Gearyco]

Two different heroes and use conditional logic.

[@chg121]

Thank you, great stuff! How would you handle customization for site wide styling. With Settings-Page from MetaBox?

[@Gearyco]

I’d need more of an example of what you’re wanting to do.

[@chg121]

@@Gearyco It's about the website for a theater project. Every year there are two phases. Phase 1 is about attracting new participants. Afterwards, when the participants have prepared a new play, it is about selling tickets for the performances (phase 2). My idea is to switch between these modes via a global setting, so that e.g. on the home page individual sections (buy tickets, registration form etc.) are shown or hidden. Is this a realistic approach?

[@edanbenatar]

Knowledge bomb! 🔥

[@awayougo]

Lovely contetn Kevin!! I would like to give it a go as well since I have got Bricks. Just a question can I use Metabox(free version) to achieve the same result? Cheers for sharing pal! :D

[@Gearyco]

Yep, you don’t need the paid version!

[@geokongr]

Great video! Do you recommend using filter css property on logo as well, instead of conditions? E.g. .logo img { filter: brightness(0) invert(1); } on Overlay.

[@Gearyco]

No. You would never want to invert a company's brand colors. The logo really needs to be swapped to a different file. It just so happened that my example used a pure black logo, but most logos aren't like that.

[@bluefuzecom]

Love this!

[@jzajzz]

27:55 sounds like a former Google engineer on the KZbin team 😂

[@exoticammu]

Thanks for sharing the great video; it solved my issue. However, how can I assign this toggle to the archive page? I selected the Bricks template in the post type, but it is not working on the archive template. It shows an overlay, but when I check the actual archive, it shows the normal header.

[@Gearyco]

Should still be a conditional logic check available for this. Post in inner circle we can help you there

[@TheLiveTentation]

Great content Kevin! Wouldn't it be easier/better to replace the logo file straight in CodeBox in the data-header-style="Overlay" attribute? This way you have everything in one place and you get rid of conditions in Bricks. *If you want to cover a link, do the bottom-left part of the screen too (SubCaptioner example section) 😀

[@Gearyco]

With php?

[@TheLiveTentation]

@@Gearyco I don't think we need php. CSS content property should do it.

[@Gearyco]

@@TheLiveTentation You can't put info like that in content field of CSS because it's not crawlable.

[@iservisat]

Great tuto as always Kevin. My question is: How can use this method if I need to use the overlay in Terms archive pages?

[@Gearyco]

Does it not work?

[@DaleDonnolly]

@@Gearyco No it does not work for CPT Archive Templates

[@eLeieZer]

Great content Kevin as always! I am considering changing to Brick from Oxygen, do you think it is worth it?

[@Gearyco]

Yes I definitely recommend switching.

[@YorgoKastri]

thank you!

[@Gearyco]

You're welcome!

[@winwinis3483]

Kevin, I am interested in why don't you like sticky header? For me, as a user, it saves me having to scroll all the way to the top every time I want to check a new page, especially if no "back to top" link available. Have you done / could you do a tutorial on multiple row Sticky Headers in Bricks with reducing the size of the logo and just 1 row to minimize space on scroll? BTW I love all your tutorials.

[@Gearyco]

Beacuse it takes me 00000.01 seconds to scroll to the top of a site. It's a flick of the mouse. Sticky headers always feel in the way when I'm trying to read content on the page. Even when they shrink down, I don't like that they're taking up real estate.

[@benzmediaservices]

Hey​@@Gearyco What do you think about "hide / show on scroll navigations"?

[@superoverdrive8628]

26:48 - Have been looking for a solution to automatic extra spacing but I haven't found a solution yet. Is that something you have posted or can post? 😀

[@knuterockknee]

Can you add the ACF overlay setting to a bricks template

[@toby-green]

A tidy solution. I use ACF and it has the same issue with newly created fields not applying defaults until the content is saved. I guess this is a WP issue. Imagine there is some SQL that would apply the update... Did you ever get around to the tutorial on subtracting header height from 100vh? I did this in Bricks using Calc and subtracting header height variable and it's about 10 to 20px off.

[@Gearyco]

Yes, because the save is what commits that data to the database.

[@pandaosa9]

Magic!!

[@dahunsi]

Pardon me if this question has been asked, but will the automatic header offsets in ACSS work with this method of creating overlay headers?

[@Gearyco]

Yes

[@dahunsi]

Good to know. Got some laying around to do.

[@appstrax]

Is it possible to use attributes with gradient overlays? I want to create a query loop using the ACF repeater field. Inside the ACF repeater I want to add a main gradient color. The other color will be transparent. I want to be able to set the gradient using a dropdown. I've created data-bg-color, but I'm not sure how to apply it to the gradient.

[@Gearyco]

Yes definitely possible

[@appstrax]

@@Gearyco Can you create a tutorial for it? ;)

[@richardpeirce490]

nice option, thanks. My only question: why not simply change the svg color based on the data attribute?

[@Gearyco]

A lot more work when you have multi-color logos. And in the case of the client I showed for an example, it's a complex gradient.

[@thorsten-roever]

Thanks for the great tutorial. However, I didn't understand why I should set the color of the links to black in the css and then invert them to white. What's wrong with setting it to white right away?

[@Gearyco]

On some menus that’s fine. On certain menus Invert is more efficient. But I said in the video you can do it either way.

[@BrianBAndersen]

Great video and technic. :D But i wonder, how do you create the data attribute and condition on a template page ? Lets say, you create a template for CPT "services" archive and singular page, and you want the menu to be blue on that specific pages, how do you target the template, as its not a page and the Radio created for standard and overlay is not working on templates..

[@Gearyco]

Different technique. I’ll do a video

[@BrianBAndersen]

@@Gearyco Are you still working on this or should I look in the inner circle forum for the video? :-)

[@vault1508]

@@Gearyco ​ @BrianAndersen78 Is there a video of this yet? This technique is great but the end user has to toggle for every new post they do. It would be great, if I could just use the correct toggle setting on my posts template, so it automatically works on all posts. I tried doing this and it doesn't work.

[@Thephonkgod]

Amazing tutorial! However, i just hate the fact they made it so complicated.

[@sauna-bauer]

Hey Kevin. Is this still best practice or is ther an "easier" solution nowadays?

[@Gearyco]

As far as I know but I don’t have a need for this very often

[@sjchalton]

Should this still work if a background-color is applied to the 'Standard' header. For some reason [data-header-style="Overlay"] .fr-header-alpha {background-color: transparent;} doesn't have an effect.

[@Gearyco]

I’d have to see a link.

[@kappesante]

i, as always, like

[@anaf4072]

Thanks Kevin! Why did you not just set color: #fff for overlay header? You went with color:black and then filter.. Why?

[@Gearyco]

For a super simple menu like this you can do that. For more complex menus it’s often more efficient to use invert. But like I said in the video there are multiple ways to accomplish the same thing.

[@filmgenius2]

What if the header overlaps with the Hero’s container, how would you calculate it to add extra spacing between the header and Hero’s container?

[@Gearyco]

ACSS does this automatically. But there are a few methods. It’s hard to explain in KZbin comments.

[@natandomnik]

question is how can I set the header color in the template? When I give conditions for the archive to retrieve the value from the radio selection, the value is not retrieved.

[@natandomnik]

SOLVED: ok I set the attribute after the content loads, which is called by the class that appears in the archive template

[@DaleDonnolly]

@@natandomnik Do you mind sharing how you achieved this? Did you use Javascript?

[@JanTejano]

Can I still work on, even I don't have metabox?

[@Gearyco]

Yes

[@Multilive1000]

Is it also possible to make 2 headers in the header template and show/hide them with conditions?

[@Gearyco]

Yes but I explained why this isn’t desirable in the video.

[@AnthonyTilahun]

There's an issue using this method when it comes to the mobile menu. It causes a conflict of displaying the mobile menu properly, @Gearyco, I noticed you never clicked on the mobile menu to see how this affects the color of the mobile menu? I've tried targeting the mobile menu only and setting the filter:none, but one will always override the other regardless of the specificity, unless I'm doing this wrong. Has anyone else tried to look at their mobile menu while implementing something like this?

[@Gearyco]

This doesn’t create any issues with mobile

[@sophiemulders]

love this solution, try to build it with pods... but nope pods wont let me do it, damn need to buy AFC of metabox lol.

[@Gearyco]

What was missing in pods?

[@sophiemulders]

@@Gearyco In pods you can add CPT but not seperate custom fields. The custom fields are part of the CPT you make. But you can extend an existing post type. so I extended 'pages' added the radio buttons, but i cant get the value of those radio buttons in my data attribute in bricks. so maybe i am thinking to difficult but after trying for an hour and researching to get the data .. i gave up. for now. and probably it gives a problem for custom post types, but did not have a chance to test. I cant appoint them to pages and posts, unless i also extend posts to but then i am repeating myself and that is chump like behaviour and someone told me not to do that ;)

[@PeterEller]

metabox is not tested with the latest version of WP is there a way to do this manually without using the metabox plugin

[@Gearyco]

? Plugins don’t release updates instantly. It works fine. It’ll update soon.

[@PeterEller]

@@Gearyco cheers! your videos are excellent!!

[@TammyButcherPlus]

For some reason, I can't get my page to accept the data-header-style. I'm selecting the element correctly via script (I can change the color using the same selection in the Inspector). And the radio is created as I can select Overlay when I edit a page. Yet it does not seem to select it dynamically so I can style it via script. Any thoughts on this?

[@Gearyco]

Could be a lot of things. Without a link, there’s not much I can do.

[@breakused]

good video, but the question is, if the user scrolls down and hits a white section, what then? i understand that you can solve this with code, but how do we solve this problem specifically with bricks? i mean, what if we do make a sticky header? :)

[@Gearyco]

Shouldn’t be an issue

[@nathansimpson6934]

sounds like the header with overlay is the exception and thus just create a header for home. then default header would be remaining... Why not? you can place global module or columns inside header and thus manage 1x with as many header rows or backgrounds as you like...

[@jeffbarnhart6441]

f it, godd*mnit. I'm going to get bricks. lol.

[@NOALNOM]

Can you explain how to use or integrate AOS data attributes, and data-swiper-parallax attributes in Bricks? A serie of videos explaining how load barba.js in Bricks also will be like a dream come true, Thanks Kev, can't wait to tomorrow's Table Talk 003 kzbin.info/www/bejne/eYjMh6Olq6yBa8U

[@marciobttb]

I read that you no longer use this but instead use a taxonomy?

[@Gearyco]

correct

[@marciobttb]

@@Gearyco How do you do it? Simply create a custom taxonomy with the two options we need and then style with CSS just like before? Do you add the taxonomy as a class in the header wrapper?

[@flekz384]

You have to buy 2 Plugins to do this ....

[@Anderson-bk1hf]

You make everything so complicated.

[@Gearyco]

How would you accomplish this?

[@Anderson-bk1hf]

@@Gearyco Alchemy obviously

[@Gearyco]

@@Anderson-bk1hf do you have anything of value to offer?

[@Anderson-bk1hf]

@@GearycoJust a few gold coins and a railroad bond.

[@Gearyco]

@@Anderson-bk1hf okay, have fun playing with yourself.