Navigation Header shifts when scrolling on mobile

Site URL: https://matey.app

Hi, does anyone know how to prevent the top header bar from shifting and changing size when scrolling on mobile? I notice that it also causes the text below it to shift position. I've attached a video. My site is on 7.1.

Thanks!

Add to Home > Design > Custom CSS

.header-announcement-bar-wrapper {
    padding: 6vw !important;
}

@tuanphan Works great! Would you be able to tell me how to do it on my other website? https://bricktechstudios.com

@tuanphan Also, it looks like the code you gave me affected the header height on desktop. Is there a way to fix this? I've attached a screenshot.

7 hours ago, cvanuch said:

@tuanphan Works great! Would you be able to tell me how to do it on my other website? https://bricktechstudios.com

new code

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