Smooth scroll causes space on top

#1

Here is my website https://www.sabrina-abraham.com. The website is built using wordpress and elementor plugin . I have enabled smooth scroll add adding id to to anchor tag and id to section . When i scroll to about me section there is a space on top which shows background color of the section before about me. My logo has a height heigher than the site header . I want the logo that way .I can fix this by setting a fixed height for logo and site header . But the logo needs to be like the way it is now. Is there any other way to fix this

#2

I think part of the problem is with the sticky nav plug-in and its elements having no height. The problem is if you give it a height it will push the content down and it doesn’t look like you can just use position relative on the #mysticky-wrap parent and position absolute on the #mysticky-nav, it almost works but not really.

What you can do is pull the content up using negative margin on say the #main element. Not sure how well that will work with elements so much out of your control as they are when using a WordPress theme and a page builder.

#mysticky-nav {
  height: 70px;
}

#main {
  margin-top: -70px;
}
#3