Header covered in mobile mode

Header covered in mobile mode

Daniel19901
Shopify Partner
177 0 30

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!!

 

Daniel19901_1-1719398578600.png

 

Replies 6 (6)

Moeed
Shopify Partner
4400 1134 1392

Hey @Daniel19901 

 

Share your Store URL and Password if enabled.

 

Best Regards,

Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Daniel19901
Shopify Partner
177 0 30

Hi @Moeed  password is: 12345

Moeed
Shopify Partner
4400 1134 1392

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:

Moeed_0-1719399278146.png

 

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

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Daniel19901
Shopify Partner
177 0 30

@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
Shopify Partner
137 21 16

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.

Screenshot from 2024-06-26 16-32-18.pngScreenshot from 2024-06-26 16-32-08.pngScreenshot from 2024-06-26 16-32-03.png

 

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

Best regards,

Darshan.

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution.
Daniel19901
Shopify Partner
177 0 30

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