How to Create a Simple Toggle-Based Overlay Header in Bricks Builder
HTML-код
- Опубликовано: 6 июн 2024
- 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: digitalambition.co/inner-circle/
If you want the best way to manage custom CSS and even write SCSS for your builds, get WPCodeBox: 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
Kevin, I am extremely grateful for your fantastic tutorials.
Shared this video with my intern today. One year later this video is still pure gold.
I can't stop watching these vids. No nuggets here, it is a freaking gold mine
💰
Brilliant! As a Brit known for understatement, I don't say that lightly. Learning so much since I discovered your videos. Thank you. 🙂
🙏
Man, your tutorials are pure gold.
Thank you a lot.
🙏
Amazing tutorial Kevin, before I was creating multiple headers lol.
These are great! Please do more, love learning from you!
I always love your tutorials. Keep posting please.
Love your stuff man. Grateful that you have a passion for teaching as well!
Awesome! lots of gold in here thanks Kevin
Brilliant tutorial Kevin, as always! ❤
TY Once Again! Nuggets all over the place! Cheers!
I always learn something from every video you put out. Amazing content!
Really interesting! Getting rid of duplicate headers from now on 😊 Thanks Kevin!
Thank You! ^__^ Diamond. You literally translated our needs,, requests, thoughts to become a true event. Much appreciated.
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.
Thanks for such a great video 👏👏👏👏. Was exactly what I was looking for
Great tutorial, as always. Learn something new with every single video!
Wonderful! out-of-the-box-thinking solution to the double header dilema. Thank you!
Awesome! I am actually learning.
This Tutorial is awesome 🙌
Immediately impemented it on my page, since I also use an overlay header
Brilliant and effective as usual 🤩
Glad you point out that custom field glitch at 23:00 , been having troubles with that in the past aswell. Great video as usual!
That's a neat way! Thanks for sharing!
Another Awesome Tutorial...
So cool! Learned something new!
GOAT! Man I love your tutorials. Thanks for sharing so much knowledge with us Kevin!
My pleasure
Your channel is an utter goldmine for learning and advancement. Thank you so much for your generosityand passion.
My pleasure!
Wow...learn something new every time I watch your videos. Thank you for sharing your knowledge 🙂
Happy to hear that!
Great tutorial. Thanks for that. :)
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!
Glad you enjoyed it!
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.
Glad you liked it!
Great tutorial.
Love this!
Love the video Kevin - upping my chump free game one tut at a time 😂
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 :)
Knowledge bomb! 🔥
Gold indeed!
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!
Hmm, shouldn’t be necessary
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
good one
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 🙏😎
How will that give you finer control? You’ll have duplicate elements to manage, including duplicate menus.
Another great "chump-free" tutorial.
Magic!!
thank you!
You're welcome!
27:55 sounds like a former Google engineer on the RUclips team 😂
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
Not sure I understand the use case.
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.
Two different heroes and use conditional logic.
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.
Thank you, great stuff! How would you handle customization for site wide styling. With Settings-Page from MetaBox?
I’d need more of an example of what you’re wanting to do.
@@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?
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
Yep, you don’t need the paid version!
Can you add the ACF overlay setting to a bricks template
i, as always, like
Great tuto as always Kevin. My question is: How can use this method if I need to use the overlay in Terms archive pages?
Does it not work?
@@Gearyco No it does not work for CPT Archive Templates
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.
Sure, it’s just harder to manage imo and creates more opportunities for inconsistencies (eg update one and forget to update the other).
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
Great content Kevin as always! I am considering changing to Brick from Oxygen, do you think it is worth it?
Yes I definitely recommend switching.
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.
Hey@@Gearyco
What do you think about "hide / show on scroll navigations"?
nice option, thanks. My only question: why not simply change the svg color based on the data attribute?
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.
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? 😀
The wizard of web design, thank you very much for sharing man
My pleasure!
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) 😀
With php?
@@Gearyco I don't think we need php. CSS content property should do it.
@@TheLiveTentation You can't put info like that in content field of CSS because it's not crawlable.
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.
Yes, because the save is what commits that data to the database.
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?
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.
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?
ACSS does this automatically. But there are a few methods. It’s hard to explain in RUclips comments.
Thanks Kevin! Why did you not just set color: #fff for overlay header? You went with color:black and then filter.. Why?
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.
Pardon me if this question has been asked, but will the automatic header offsets in ACSS work with this method of creating overlay headers?
Yes
Good to know. Got some laying around to do.
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.
I’d have to see a link.
Is it also possible to make 2 headers in the header template and show/hide them with conditions?
Yes but I explained why this isn’t desirable in the video.
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.
Yes definitely possible
@@Gearyco Can you create a tutorial for it? ;)
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?
Could be a lot of things. Without a link, there’s not much I can do.
Hey Kevin. Is this still best practice or is ther an "easier" solution nowadays?
As far as I know but I don’t have a need for this very often
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?
This doesn’t create any issues with mobile
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.
SOLVED: ok I set the attribute after the content loads, which is called by the class that appears in the archive template
@@natandomnik Do you mind sharing how you achieved this? Did you use Javascript?
Can I still work on, even I don't have metabox?
Yes
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..
Different technique. I’ll do a video
@@Gearyco Are you still working on this or should I look in the inner circle forum for the video? :-)
@@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.
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? :)
Shouldn’t be an issue
metabox is not tested with the latest version of WP is there a way to do this manually without using the metabox plugin
? Plugins don’t release updates instantly. It works fine. It’ll update soon.
@@Gearyco cheers! your videos are excellent!!
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.
What was missing in pods?
@@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 ;)
Amazing tutorial! However, i just hate the fact they made it so complicated.
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...
I read that you no longer use this but instead use a taxonomy?
correct
@@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 ruclips.net/video/CWiVpovGN5c/видео.html
f it, godd*mnit. I'm going to get bricks. lol.
You make everything so complicated.
How would you accomplish this?
@@Gearyco Alchemy obviously
@@Anderson-bk1hf do you have anything of value to offer?
@@GearycoJust a few gold coins and a railroad bond.
@@Anderson-bk1hf okay, have fun playing with yourself.