How do i change the header size on mobile view - DEBUT Theme

Solved
healhana
Explorer
55 0 20

Hi there

The header is too big on mobile, I believe this is due to the logo not changing size - any ideas how to fix?

healhana_0-1614942897883.png

 

Thanks!

0 Likes
dmwwebartisan
Shopify Partner
5862 1340 1721

@healhana 

Yes, you are right. This is because of the logo otherwise your mobile header is fine. Please provide me URL.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
healhana
Explorer
55 0 20

Thanks!, url is healhana.com and the preview is on https://w0sdwyel2km4s2tn-47542796440.shopifypreview.com.

 

Please let me know if you need anything else?

dmwwebartisan
Shopify Partner
5862 1340 1721

@healhana 

If we make the logo small then the header will reduce.  Let me know your thoughts.

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
healhana
Explorer
55 0 20

The problem is that if I make the logo smaller, then it will be too small for desktop. It would be great to change the size of the logo in the header only for the mobile view?

dmwwebartisan
Shopify Partner
5862 1340 1721

@healhana 

Yes, that I wanted to say. We can a little bit make it small in size for mobile only. Let me know. I will try to give you the code.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
healhana
Explorer
55 0 20

Yes please, that would be perfect!

dmwwebartisan
Shopify Partner
5862 1340 1721

This is an accepted solution.

@healhana 

Please add this code at the bottom of your assets/theme.scss.liquid file.

@media only screen and (max-width: 749px){
a.site-header__logo-image img { max-width: 50px !important; }
.main-content{ padding-top: 13px !important; }
}

 

Above I have given max-width 50px you can increase or decrease it as per your need.

Let me know if this works.

Thanks! 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
healhana
Explorer
55 0 20

Amazing thank you so much for your help!