Gap under sticky menu when scrolling

Hi there

When scrolling down there is a white gap in between the sticky menu and the header image. How can I remove this?

My site isn’t currently public but here’s a screenshot if that helps:

Thanks for your help!

Hello,

I don’t think that we can provide much help here without a link, unfortunately.

Kind Regards, Roman.

Thanks for your quick reply. I’ve published the site now and the problem persists.

Would you be able to have a look?

Thanks very much!

Hello, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

.is-sticky .site-header .custom-logo-link img {
    max-width: none;
}

#masthead {
  padding: 0;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Thank you very much, Roman. That removes the gap.

It also means the menu doesn’t change size when scrolling. Not sure if that was intended, but it looks better in my opinion as the logo doesn’t shrink.

That said (and being picky now) on first scroll it moves up just a tiny bit, which makes it seem as if it still meant to reduce in size. Is it meant to be that way?

Hello, you are welcome!

It also means the menu doesn’t change size when scrolling. Not sure if that was intended, but it looks better in my opinion as the logo doesn’t shrink.

It was intended since your logo isn’t high, so it’s not necessary to shrink it on scroll.

That said (and being picky now) on first scroll it moves up just a tiny bit, which makes it seem as if it still meant to reduce in size. Is it meant to be that way?

Well, that movement occurs because of scrolled menu CSS positioning switch, try to add this CSS code as well in order to avoid the movement:

header#masthead {
    position: fixed;
}

Kind Regards, Roman.