Consider using scroll-padding-top

[dominikh]

Currently, Docsy uses a :before on headers to offset the scroll position of anchors, to account for the fixed header. This works, but has some downsides. For example, giving headers a background color (e.g. for :target) will color the :before part, too.

Modern browsers have an alternative solution: scroll-padding and scroll-margin. scroll-padding can be set on the outer container to add padding to scroll positions, whereas scroll-margin can be set on individual elements.

The simplest solutions would be

@include media-breakpoint-up(md) {
	h2[id], h3[id], h4[id], h5[id] {
		scroll-margin-top: 5rem;
	}
}

or

@include media-breakpoint-up(md) {
	html {
		scroll-padding-top: 5rem;
	}
}

The first solution is the closest to the existing approach, whereas the second approach is more universal (lots of things can have anchors, after all) and the one I am favouring currently.

I haven't looked into what's needed to make td-offset-anchor work as before. Probably a scroll-margin-top of -1rem on it. Something like (untested)

@include media-breakpoint-up(md) {
	html {
		scroll-padding-top: 5rem;
	}

	.td-offset-anchor {
		scroll-margin-top: -1rem
	}
}

I'm not a web designer by trade, so input from experts is highly welcomed.

[emckean]

Thanks for the suggestion! This might be covered in the new Bootstrap version -- I'll take a look :)

[ShlokJswl]

Hello can you please assign this issue to me?