On-page anchor link scrolls to middle of section instead of top

Site URL: https://bsafe.best/features

Hi! I'm having an issue with multiple sites where the navigation bar has on-page anchor links that smooth-scroll to various sections. When the user clicks it - regardless of mobile or desktop - the page scrolls past the heading into the body of the section. 

I've tried using #page-section-pagesectionnumber and #custom ID as anchors with the same result. 

This is the smooth scroll code I'm using: 

///SMOOTH SCROLL///

html {
scroll-behavior: smooth;
}

Password is bSafe.

Note: the fixed-position header appears to be the culprit. Is there a way around it?

Because the header is sticky

You need to make header unsticky on this page, or add some spacer on above content

On 6/20/2022 at 5:49 AM, tuanphan said:

Because the header is sticky

You need to make header unsticky on this page, or add some spacer on above content

I'm having the same issue as the OP, and my header is not sticky. Please see the first button on: https://gabrielaydeko.squarespace.com/save-the-date (pw: boda).

17 hours ago, gabrielachuela said:

I'm having the same issue as the OP, and my header is not sticky. Please see the first button on: https://gabrielaydeko.squarespace.com/save-the-date (pw: boda).

First, change anchor url from this 

/save-the-date#page-section-62a343e75fe4dc3c2b60baaf

to this

#te-gusta

Next, add a Code Block above ¿Te gusta beber y comer? > Paste this code

<span id="te-gusta"></span>
<style>
  #te-gusta {
  	position: relative;
    top: -150px;
  }
</style>