Establishing a variable that matches your header height is very helpful in modern development for various use cases. For example, let’s say your header is sticky and you’re using a sticky element on your page. You need a top value on your sticky element that references your website’s header height.
Automatic.css creates a --header-height variable automatically. You just have to tell ACSS what the height of your header is. Once ACSS has this information, it can automatically create super helpful content offsets, sticky offsets, scroll offsets, etc.
First, let’s talk about how to set your header heights. Then we’ll run through all the things ACSS can help you with when it comes to your header height.
Header Height Values
In the ACSS dashboard, navigate to Additional Styling. Then find the Header Heights panel.
ACSS needs to know the height of your header at each breakpoint. This is easy to find by loading your site on the front end, right clicking your header, and getting the computed height. Do this at each breakpoint and insert the value into the inputs.
Note: If your header height ever changes, recalculate these values.
Offset Page Content Automatically
If your website uses a sticky header, it means that your header takes up some of the room in the hero section of your pages. This makes your hero spacing look off-balance.
In this case, turn on the “Offset Page Content Automatically” option. Automatic.css will now fix every page on your website automatically, restoring perfectly balanced spacing to the first section on every page.
Scroll Offsets
The panel below the Header Styling panel is the Scroll Styling panel. These let you set offsets for scroll-to-hash links. This ensures that when users scroll to a hash link on your page, the content has some breathing room and isn’t touching the edge of the screen.
Even worse, on some sites the sticky header covers up the content!
If you’re using a sticky header and have already set your header heights, Automatic.css will create an offset equal to the height of your header automatically. You don’t have to do anything else. If, however, you want to set an *additional* offset for extra breathing room, you can do that via the Scroll Offsets panel.
Again, you can set a different value at each breakpoint to dial in the exact result you’re going for.
Sticky Offset
The same issue with scroll-to-hash happens with sticky elements. By default sticky elements stick to the top of the screen. A sticky header will cover them up if you don’t give the sticky element an offset value.
If you want Automatic.css to automatically rescue your sticky elements and offset them, turn on the “Offset Sticky Elements Automatically” setting in the Sticky Settings panel:
Now, when you use the .sticky class, you don’t have to worry about an offset. ACSS will use your header height and your offset preferences from above to generate the appropriate offset.
Of course, this can be overridden on a case-by-case basis by setting a custom top value for any sticky element.