The header looks cropped when trying to make it sticky only on mobile screen

Basically I’m trying to make the header of my website (astra theme) sticky with CSS code and it worked perfect in desktop view. The problem is with mobile devices, for some reason only in the home page when you scroll down, the header will be cut from the top of the screen.

I share my CSS code:

#ast-desktop-header {
position: fixed;
width: 100%;
top: 0;
z-index: 99;
}
@media (min-width: 922px){
#content.site-content {
margin-top: 151px;
}
}
#ast-mobile-header {
position: fixed;
width: 100%;
top: 0;
}
@media (max-width: 544px) {
#content.site-content {
margin-top: 68.63px;
}
}

I tried with different classes like “.main-header-bar, .main-header-bar-wrap, ast-primary-header-bar or .ast-primary-header“. Same problem with all of them.

Like I said, the problem only happens in the home page, every other page works fine and this problem is only in mobile devices. I’ve been trying different things for two days with no luck.

I share the link to imgur with the 2 screenshots, the first one with the home page with NO SCROLL and the second one once you scroll down

https://imgur.com/a/OifIiXS

I would appreciate A LOT any help with this. Thanks!

PS: the site is live and the CSS code is enabled so you can check it whenever you want

• This topic was modified 1 year, 11 months ago by jossmo.
• This topic was modified 1 year, 11 months ago by James Huff.

The page I need help with: [log in to see the link]