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.
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
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.
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
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?
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 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!
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!
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.
🙏🎉
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
💪🏻
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.
No headaches when working with headers if you have ACSS installed! Mind, headers... blown! superb, thanks.
You and me are on the same page! Exactly what I’m working on, Super thanks 🎉
Just what I was looking for ACSS just keeps getting better and better 100%
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.
An amazing tutorial. Thank you, Kevin.
I want a video like this everyday. 🎉 happy solstice party to eveeyone!
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.
Thanks Kevin- very nice functionality.
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 🤣
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
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.
Awesome!!!
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
Good video!
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!
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.
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.
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 😉
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 ;-)