What is the correct code to resize a logo in Shopify mobile view?

MLG0810
Excursionist
65 1 8

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?

Replies 17 (17)

Denishamakwana
Shopify Partner
1408 173 231

Hi,

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

Thank you.

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme

solverStaff
Shopify Expert
359 40 69

Please share your store URL

If my reply helpful then please Like to let me know!
If my answered is right according to your question, Mark it as an Accepted Solution.
Facing more issues ? Hire me For Quick Chat: Say hello in WhatsApp : +8801761469797

GemPages
Shopify Partner
5588 1261 1203

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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
MLG0810
Excursionist
65 1 8

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
Shopify Partner
61 4 14

@MLG0810 
Please add below css for sticky announcement bars

div#shopify-section-announcement-bar {
    position: sticky;
    top: 0;
}
If helpful then please Like and Accept Solution.
MLG0810
Excursionist
65 1 8

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
Excursionist
65 1 8

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
Shopify Partner
61 4 14

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;
}
}
If helpful then please Like and Accept Solution.
MLG0810
Excursionist
65 1 8

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

solverStaff
Shopify Expert
359 40 69

Can you share a screenshot please?

If my reply helpful then please Like to let me know!
If my answered is right according to your question, Mark it as an Accepted Solution.
Facing more issues ? Hire me For Quick Chat: Say hello in WhatsApp : +8801761469797
solverStaff
Shopify Expert
359 40 69

 

 

 

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

Or you can use that css code

If my reply helpful then please Like to let me know!
If my answered is right according to your question, Mark it as an Accepted Solution.
Facing more issues ? Hire me For Quick Chat: Say hello in WhatsApp : +8801761469797
Dan-From-Ryviu
Shopify Partner
7394 1421 1414

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;
}
}

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

MLG0810
Excursionist
65 1 8

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
Shopify Partner
61 4 14

@MLG0810 
you can use below css for sticky header 

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

 

If helpful then please Like and Accept Solution.
MLG0810
Excursionist
65 1 8

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
Shopify Partner
61 4 14

@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;
}

 

If helpful then please Like and Accept Solution.

PageFly-Victor
Shopify Partner
7865 1785 3050

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;

}

}

PageFlyVictor_0-1670571195725.png

 

Hope that my solution works for you.

Best regards,

Victor | PageFly