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!
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.
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.
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!
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 :)
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
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.
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.
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
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 🙏😎
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
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) 😀
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.
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.
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.
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...
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 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 ;)
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? 😀
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
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? :)
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.
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?
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.
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?
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.
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.
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.
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 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?
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.
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 @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.
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 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?
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 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-CWiVpovGN5c.html
