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.
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-topproperty 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