How can I reduce the logo size in mobile view?

[MLG0810]

Have been trying to make logo size smaller in mobile view but it has not changed, it is still huge. Any help in right code to use?

[Denishamakwana]

Hi,

Please share your store URL and if your store is password protected then also provide password too.

Thank you.

[solverStaff]

Please share your store URL

[GemPages]

Hello @MLG0810 

To provide you with the most precise solution in this case/ To make sure we catch your meaning right, could you please share... link? Thank you and hope to hear from you

[MLG0810]

LINK HERE

i want to make logo for mobile smaller coz the header is way too big on mobile and i have tried all adjustments to no avail. i know the design of logo affects it but if there is any chance to make it smaller on mobile, it would help. thanks.

also - i have 2 announcement bars. i want to make it sticky so it is always on view when scrolling or not. can you also assist on the code. coz i have tried to do it but the header keeps getting affected and cut (i think because of padding issues) or it doesn't work at all with my adjustments. 

thanks! would appreciate immediate help. xx

[Rajvi__patel]

@MLG0810 
Please add below css for sticky announcement bars

div#shopify-section-announcement-bar {
    position: sticky;
    top: 0;
}

[MLG0810]

hey! it worked but now, when i scroll, the sticky header is cut because the announcement bar is sticky. any work around to ensure it is not cut? and also now, the header is completely gone and not sticky on mobile. 

[MLG0810]

hey! it worked but now, when i scroll, the sticky header is cut because the announcement bar is sticky. any work around to ensure it is not cut? and also now, the header is completely gone and not sticky on mobile. would appreciate response and assist on this please thank you! 

[Rajvi__patel]

Hiii @MLG0810 

You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css.
Step 3: Paste the below code at bottom of the file -> Save

@media screen and (max-width: 767px){
h1.header__heading {
    width: 80px;
    height: 80px;
}
}

[MLG0810]

sorry but it did not work, the logo still looks huge on mobile. no change whatsoever 😞 any other suggestions? 

[solverStaff]

Can you share a screenshot please?

[solverStaff]

@media screen and (max-width: 767px){
.header__heading-logo {
	max-width: 60px !important;
}
}

Or you can use that css code

[Dan-From-Ryviu]

Add this code at the bottom of your base.css, click Save button to solve it 

@media screen and (max-width: 767px){
.header__heading-logo {
    max-width: 80px !important;
}
}

[MLG0810]

hey! thanks that worked! 

one more question if you can help - i need the 2 announcement bars on top to stick like the header, but the code i used made only 1 stick and then it cut off the logo - i think this is because of the padding. can you assist please coz have been racking brain with it for days - i want both announcements sticky with the header and ensure that logo does not get cut. 

[Rajvi__patel]

@MLG0810 
you can use below css for sticky header 

sticky-header.header-wrapper.color-inverse.gradient {
    position: sticky;
    top: 0;
}

[MLG0810]

hello!

ok tried this but it does not work.

- the header and announcement is working perfect static and looks great on layout. BUT when i activate sticky - the header is cut (padding issue). i need to adjust it so it does not cut the logo/header when scrolling. also, i want to maintain spacing on both desktop/mobile so that there is not huge space in between when adjusting padding.

basically right now, with the code you gave me, it has adjusted the padding so i can see a little bit of logo but it is still cut - this is on desktop. but on mobile, when i view it static, there is now a huge space and when scrolling the logo is still cut. 

totally confused with the codes now! so sorry. help!

[Rajvi__patel]

@MLG0810 
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css.
Step 3: Paste the below code at bottom of the file -> Save

div#shopify-section-header {
    top: 85px!important;
}

[PageFly-Victor]

Hi @MLG0810 

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css.

Step 3: Paste the below code at top of the file -> Save

@media screen and (max-width: 767px){

.header__heading .header__heading-logo {

    max-width: 80px !important;

}

}

Hope that my solution works for you.

Best regards,

Victor | PageFly