Header covered in mobile mode

[Daniel19901]

Hi,
hope you can help 🙂

For some reason my header on mobile mode covers the pages. Can anyone help me bring it up so that it won't cover the beginning of my pages ? (Dawn theme)- image attached
https://adventskalender20.de/

Thank you in advance!!

[Moeed]

Hey @Daniel19901 

Share your Store URL and Password if enabled.

Best Regards,

Moeed

[Daniel19901]

Hi @Moeed  password is: 12345

[Moeed]

Hey @Daniel19901 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
.header {
    padding-top: 35px !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Daniel19901]

@Moeed  thank you so much!! It worked for the homepage. Is there a way to make it work for allo other pages as well. I guess this is because I have a transparent one for the homepage 

[Darshanp712]

Hello @Daniel19901, Please add the below CSS code in your header CSS file or else add it in custom CSS.

@media screen and (max-width: 599px) {
     .header-wrapper {
        background: transparent;
        position: absolute;
        width: 100%;
        top: unset;
    }
}

 It looks completely fine without any space or padding when you scroll up with a sticky header, see the output below.

Feel free to reach out if you have any questions or need assistance.

Best regards,

Darshan.

[Daniel19901]

@Darshanp712 worked like magic:) Is there a way but to do it also for the other pages ?