Shopify themes, liquid, logos, and UX
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?
Hi,
Please share your store URL and if your store is password protected then also provide password too.
Thank you.
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
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
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;
}
}
sorry but it did not work, the logo still looks huge on mobile. no change whatsoever 😞 any other suggestions?
@media screen and (max-width: 767px){
.header__heading-logo {
max-width: 60px !important;
}
}
Or you can use that css code
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
Please let me know if it works by giving it a like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
Let’s create a unique website design with PageFly for free now!
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;
}
}
Get 3 months of Shopify for $1/month. Sign up here
Ryviu - Aliexpress Reviews app - is a product review app with the ability to import reviews from Aliexpress, Amazon, Etsy, and DHgate. Over 56.000 stores use it.
Is it helpful? Like or Accept solution to let me know 🙂
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.
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.
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!
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!
@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;
}
User | RANK |
---|---|
210 | |
150 | |
68 | |
46 | |
40 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023