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.
Please share your store URL
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
@MLG0810
Please add below css for sticky announcement bars
div#shopify-section-announcement-bar {
position: sticky;
top: 0;
}
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!
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?
Can you share a screenshot please?
@media screen and (max-width: 767px){
.header__heading-logo {
max-width: 60px !important;
}
}
Or you can use that css code
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 and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
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.
@MLG0810
you can use below css for sticky header
sticky-header.header-wrapper.color-inverse.gradient {
position: sticky;
top: 0;
}
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;
}
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
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024