funnel icon indicating copy to clipboard operation
funnel copied to clipboard

Direct links to sections hide their title behind the fixed navbar

Open karthikb351 opened this issue 1 year ago • 0 comments

Bug Report

https://github.com/hasgeek/funnel/assets/3104454/b1f79876-0eca-4cf3-9d40-29b83a52054e

When linking to a specific section via # fragments in the url, (like the Membership section for the "Become a Member" CTA), the header is hidden since by default the browser will have the element at the top of the viewport, unaware of the fixed header or other content that could hide it.

Potential solution

There is a scroll-padding-top property in CSS that was designed to address this problem, which indicates to the browser that when scrolling there should be a padding consider. This is usually set to be equal to the height of the fixed header.

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top

karthikb351 avatar Jul 08 '24 16:07 karthikb351