dekstop vs mobile Header sizing

[Vironne]

Hi Shopify community,

I'm struggling with my Header, where my mobile look well, my desktop is not. 

how to change the size of my desktop header like the mobile one, without impacting the mobile sizing.

website : https://www.bonnedose.co/

Best

[Moeed]

Hey @Vironne 

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 (min-width: 768px) {
header {
    padding-top: 35px !important;
    padding-bottom: 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

[DaisyVo · Accepted solution]

Hi @Vironne 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

@media screen and (min-width: 1024px){
header.header {
    padding-block: 10px !important;
}
}

Here is the result: https://prnt.sc/uGgyGlLwn7IX

I hope this helps

Best,

Daisy

[Vironne]

thanks a lot 🙂