I'm working on my third site with an overlay header, and I'm combining the techniques from your other video: How to Create a Simple Toggle-Based Overlay Header in Bricks Builder, and oh my! It's really all come together! What has also hit home for me is having the ACSS setting panel open at all times and controlling the entire site from here, which I've "sort of" been doing, in the past, but I've still been doing unnecessary custom CSS when I can control most of what I want from the panel. After completing PB 101 and building a solid foundation, then moving on to ACSS 101 and learning how the framework actually works, I feel much more confident to experiment and play around more. I am amped for new builds - thanks again for it all! Have a merry Christmas and all the best for 2025!
Hey bro that's exactly what I'm doing! I did learn vanilla HTML and CSS first with freecodecamp a few months back but pb 101 I to ACSS 101 really does flow together so well 👌
I am so glad that I am part of the ACSS community and using this framework. I can't imagine how much additional work and frustration I'd have to go through on my own if I didn't have ACSS. Thanks Kevin and the entire ACSS team.
This is a great tutorial for anyone wanting to learn about sticky headers! The explanation of how Automatic CSS handles content spacing and scroll-to-hash conflicts is particularly helpful. I also appreciate the part about disabling the offset or adding extra scroll offset - that gives you a lot of control over the final design.
Timestamps: 00:02 Automate CSS for basic header vs sticky/overlay headers 02:03 Using gutter values for proper padding and alignment 06:12 Making headers stick to the top of the page while scrolling. 08:15 Sticky headers prevent collisions and adhere to best practices. 12:33 Hover over header to auto select and get details 14:41 Adjusting header heights across different screen sizes 18:42 Explanation of body class and content offset 20:30 Disabling offsets for specific headers 24:18 Adjust scroll offset for headers and sticky headers 26:19 Managing different headers with ACSS features
I'm glad you tackled this topic and showed how to get the header height. I used to force the height by setting it on the header wrapper, but measuring it is simpler.
awesome.the only two things I would suggest were automatic offset (maybe via class-/id-selector, but glad to hear you're working on it) and second, but I don't know if this has to be a bricks-thing: sticky headers with extra bars: it's very handy to create info-bars, may it be for contact-informations or like "x€ until free shipping" for woocommerce or whatever. But I only want these for the header on top, not for the sticky one. I imagine when scrolling, the whole header scrolls up, until the "main-header" (the one to be sticky) touches the top and becomes sticky after. end even keep in mind, those bars may be conditional and could become hidden/not rendered at all. quite a task I guess, but this would be even more next level in terms of header building
@@AutomaticCSS Thanks Kevin. This is what I'm using at the moment to invert the SVG logo colour and shrink it accordingly. It's a bit rough, though, and the transition isn't working particularly well. sticky.scrolling %root% { max-height: 80px; filter: brightness(0) invert(1); transition: all 1s ease-in-out; } %root%:not(.scrolling) { transition: all 1s ease-in-out; }
This. Really important, because it's nice to have a large header, with a large logo and menu, sometimes additional items. But scrolling down, that takes too much space, so it needs to shrink or even vanish, then reappear when scrolling up a little. Currently I'm using my own JS for that. Would be really cool to have a solution right in Bricks / ACSS.
This is great. 2 questions on practicalities of implementing settings. 1. At what point would you draw the line for going back to bring up a past website to current 'best practice'? I guess a balance of necessity with updates vs doing for the sake of doing it. 2. How do you keep track of the time saving settings you have implemented in a site? With Bricks, ACSS etc. they evolve hugely over the space of a year, I can envisage a scenario where I've forgotten some stuff eg. when it's set in a blueprint site.
Not sure what you mean. This particular feature is only needed when you have an overlay or sticky header so you turn it on when needed and keep it off when you don’t
I really hope you’ll implement a toggle for a js script that measures the height automatically. For now I feel like it’s easier to write such a script myself thaneasuring and inputing a different value for each breakpoint. Great video though! Thanks for all the amazing work!
hey Kevin, remarkable feature for headers in ACSS. it definitely makes things easier! i only missed the scenario where the header slides off screen to the top when scrolling down, and slides back in when scrolling up. does everything that was covered makes it work out of the box? or are there any other details we should know about for this scenario to work properly?
Is the header height for different breakpoints (offset content automatically) able to be automated in the future? Or is this impossible? I really like the feature!
So with this new data attribute feature... the workload from your previous video on the subject is slightly different, we create two different headers now? One for dark overlay and another for standard headers?
I understand now why Reddit users dislike this guy. Dude, this is ACSS, and we've already bought your plugin-please just teach us directly without wasting our time on compare the usual methods.
I'm working on my third site with an overlay header, and I'm combining the techniques from your other video: How to Create a Simple Toggle-Based Overlay Header in Bricks Builder, and oh my! It's really all come together! What has also hit home for me is having the ACSS setting panel open at all times and controlling the entire site from here, which I've "sort of" been doing, in the past, but I've still been doing unnecessary custom CSS when I can control most of what I want from the panel. After completing PB 101 and building a solid foundation, then moving on to ACSS 101 and learning how the framework actually works, I feel much more confident to experiment and play around more. I am amped for new builds - thanks again for it all! Have a merry Christmas and all the best for 2025!
Glad to hear!
Hey bro that's exactly what I'm doing! I did learn vanilla HTML and CSS first with freecodecamp a few months back but pb 101 I to ACSS 101 really does flow together so well 👌
I am so glad that I am part of the ACSS community and using this framework. I can't imagine how much additional work and frustration I'd have to go through on my own if I didn't have ACSS. Thanks Kevin and the entire ACSS team.
🙏🎉
This is a great tutorial for anyone wanting to learn about sticky headers! The explanation of how Automatic CSS handles content spacing and scroll-to-hash conflicts is particularly helpful. I also appreciate the part about disabling the offset or adding extra scroll offset - that gives you a lot of control over the final design.
Timestamps:
00:02 Automate CSS for basic header vs sticky/overlay headers
02:03 Using gutter values for proper padding and alignment
06:12 Making headers stick to the top of the page while scrolling.
08:15 Sticky headers prevent collisions and adhere to best practices.
12:33 Hover over header to auto select and get details
14:41 Adjusting header heights across different screen sizes
18:42 Explanation of body class and content offset
20:30 Disabling offsets for specific headers
24:18 Adjust scroll offset for headers and sticky headers
26:19 Managing different headers with ACSS features
💪🏻
No headaches when working with headers if you have ACSS installed! Mind, headers... blown! superb, thanks.
Just what I was looking for ACSS just keeps getting better and better 100%
You and me are on the same page! Exactly what I’m working on, Super thanks 🎉
I'm glad you tackled this topic and showed how to get the header height. I used to force the height by setting it on the header wrapper, but measuring it is simpler.
I want a video like this everyday. 🎉 happy solstice party to eveeyone!
An amazing tutorial. Thank you, Kevin.
Thanks Kevin- very nice functionality.
awesome.the only two things I would suggest were automatic offset (maybe via class-/id-selector, but glad to hear you're working on it)
and second, but I don't know if this has to be a bricks-thing: sticky headers with extra bars:
it's very handy to create info-bars, may it be for contact-informations or like "x€ until free shipping" for woocommerce or whatever.
But I only want these for the header on top, not for the sticky one. I imagine when scrolling, the whole header scrolls up, until the "main-header" (the one to be sticky) touches the top and becomes sticky after. end even keep in mind, those bars may be conditional and could become hidden/not rendered at all.
quite a task I guess, but this would be even more next level in terms of header building
At this point, developing websites without a framework is unimaginable to me. I hope ACSS is gonna be around for a long long time into the future 😅
ACSS might be the reason I don't eventually move to Webflow.
This is perfect. I'm working on a demo site and Bev said, 'I want one of those sticky header things.'
Bev loves sticky stuff, for sure.
@@AutomaticCSS😂😂
@@AutomaticCSS 🤣
Oh yes! Exclude header !!!! Thank you
Thank you for another great tutorial, Kevin. Is there an ACSS solution to shrinking a Sticky Header on scroll?
I think so, I’ll have to test it out
@@AutomaticCSS Thanks Kevin. This is what I'm using at the moment to invert the SVG logo colour and shrink it accordingly. It's a bit rough, though, and the transition isn't working particularly well.
sticky.scrolling %root% {
max-height: 80px;
filter: brightness(0) invert(1);
transition: all 1s ease-in-out;
}
%root%:not(.scrolling) {
transition: all 1s ease-in-out;
}
@@AutomaticCSS Hi Kevin, I appreciate you have a lot going on with Etch, but have you had a chance to update this?
This. Really important, because it's nice to have a large header, with a large logo and menu, sometimes additional items. But scrolling down, that takes too much space, so it needs to shrink or even vanish, then reappear when scrolling up a little. Currently I'm using my own JS for that. Would be really cool to have a solution right in Bricks / ACSS.
This is great. 2 questions on practicalities of implementing settings. 1. At what point would you draw the line for going back to bring up a past website to current 'best practice'? I guess a balance of necessity with updates vs doing for the sake of doing it. 2. How do you keep track of the time saving settings you have implemented in a site? With Bricks, ACSS etc. they evolve hugely over the space of a year, I can envisage a scenario where I've forgotten some stuff eg. when it's set in a blueprint site.
Not sure what you mean. This particular feature is only needed when you have an overlay or sticky header so you turn it on when needed and keep it off when you don’t
I really hope you’ll implement a toggle for a js script that measures the height automatically. For now I feel like it’s easier to write such a script myself thaneasuring and inputing a different value for each breakpoint. Great video though! Thanks for all the amazing work!
Than measuring* typo
By all means, write the script and send it over 😉
Good video!
Awesome!!!
This is awesome
hey Kevin, remarkable feature for headers in ACSS. it definitely makes things easier! i only missed the scenario where the header slides off screen to the top when scrolling down, and slides back in when scrolling up. does everything that was covered makes it work out of the box? or are there any other details we should know about for this scenario to work properly?
For that scenario, you would likely want to turn off the switch for header scroll offset
@@AutomaticCSS ok, good to know. thanks!
is there anything against defining the min-height of the header with var(--header-height) and then using acss dashbord to set the height under header?
Should be fine!
What about using JS to get the header height and put it in a CSS variable and using that for the breakpoints?
Of course we have thought of such things. Now try to do it … it’s not as easy as it sounds. The method you just proposed causes FOUC.
Is the header height for different breakpoints (offset content automatically) able to be automated in the future? Or is this impossible?
I really like the feature!
It’s just a lot more difficult than it seems. We are wrapping up other stuff and will revisit it.
@@AutomaticCSS if it was easy I bet it was already in there ;-)
So with this new data attribute feature... the workload from your previous video on the subject is slightly different, we create two different headers now? One for dark overlay and another for standard headers?
Not necessarily. There are different approaches for different requirements. It depends on what you’re trying to accomplish.
I understand now why Reddit users dislike this guy. Dude, this is ACSS, and we've already bought your plugin-please just teach us directly without wasting our time on compare the usual methods.
It’s how people learn. Fast forward if you don’t like it. But most importantly, Quit whining.