Anyone else running into issues with dawn's sticky header covering anchor links?

Store Design
1

i’ve got a client where clicking nav anchor links scrolls to the right section but the header sits right on top of the heading. classic problem, but the fix i usually use (adding scroll-margin-top to the target element) isn’t working consistently across browsers for them.

this is what i’ve got in base.css right now:

.section-header ~ * [id] {
  scroll-margin-top: 8rem;
}

works fine in chrome, patchy in safari. wondering if anyone’s landed on a cleaner solution or if there’s something specific about how dawn handles the sticky header height variable that i’m missing.

2

A no-coding solution can be to add another (almost invisible) anchor a bit higher.

See How to make button scroll to specific section on same page - #3 by tim_1

Another option is to use JS to override anchor link handling.

Finally, should it be scroll-margin-top or scroll-padding-top?
The latter specifically suggests your use-case :

Ah, this depends on where you apply this property – scroll-margin-top works for target elements (as in your code), while scroll-padding-top – on container – try this on body, like

body {
  scroll-padding-top: var(--header-height);
}
1 Like
3

yeah that’s a fair point on scroll-padding-top vs scroll-margin-top. i’d been applying it to the target elements but putting it on the html or scroll container is probably cleaner for a whole-site fix.

html {
  scroll-padding-top: 8rem;
}

going to try that first before reaching for JS. cheers.

1 Like