Menu to Appear when Scrolling - Format Issues Happening

Site URL: https://chicory-gecko-m8yy.squarespace.com/

I'm customising this site with CSS and running into 3 issues.

Site: https://chicory-gecko-m8yy.squarespace.com/
PW: nine

1) I'm trying to do a scroll to stick menu (where the menu appears under the first content block and then as you scroll down it sticks to the top of the page). It's looking fine on desktop however on mobile, it seems to be pulling the background colour from block 2 and applying it to the top margin so that you see an off white rectangle at the top (see attached screenshot). How do I fix this?

Code I'm using:
.header {
position: sticky!important;
top: 0px;
margin-top:100vh;
}

#page .page-section:nth-child(1){
  margin-top: -110vh;
  height: 110vh;
  margin-bottom: 0vh
}

2) Mobile only issue for same code above - when I start to scroll down, the nav bar glitches and shrinks and expands by a few point sizes randomly. See attached video.

3) I've applied a custom font, but it's not showing on mobile. Any ideas what I'm doing wrong?

Font code I'm using:

@font-face {
font-family: 'glamour';
src: url('https://static1.squarespace.com/static/66fb2ecdd6bdea5a131bea8a/t/671064c89672731e74a7c59f/1729127624842/GlamourAbsolute-regular.ttf');
}

h1,h2,h3,h4 {
font-family: 'glamour';     
}

Thanks in advance for your help!

#1. You want to remove this white space?

#2. Try this to Custom CSS box

@media screen and (max-width:767px) {
.header-announcement-bar-wrapper {
    padding-top: 3vw !important;
    padding-bottom: 3vw !important;
}
}

Hi Tuanphan,

I just realized it's not an extra space, but rather a weird background colour that somehow got added. I only see it on mobile. If you look at my screenshot in my first message, you'll see a white/yellow colour at the very top where the time and battery icons are.

If you scroll on the site, that colour stays. Is there a way to make it white (#ffffff) instead of that yellow colour?

Also -  I've applied a custom font, but it's not showing on mobile. Any ideas what I'm doing wrong?

On 10/21/2024 at 12:10 PM, SunroofDigital said:

Hi Tuanphan,

I just realized it's not an extra space, but rather a weird background colour that somehow got added. I only see it on mobile. If you look at my screenshot in my first message, you'll see a white/yellow colour at the very top where the time and battery icons are.

If you scroll on the site, that colour stays. Is there a way to make it white (#ffffff) instead of that yellow colour?

Also -  I've applied a custom font, but it's not showing on mobile. Any ideas what I'm doing wrong?

It is a part of mobile device, so there is no way to remove it. But if you need to change its color, I think we can use code.

With font, do you have a screenshot of problem? I tried checking and it is fine