Logo looks too small on the mobile version with respect to the desktop version. How can I make it bigger.
Then, is it possible to regulate the degree to which logo get smaller when scrolling down?
Topic summary
Mobile logo appears too small compared to desktop; requester wants it larger on mobile and to control how much it shrinks when scrolling.
-
A helper requested the store URL and password, then provided a CSS-based fix. They instructed editing the theme’s “bass.css” to center the logo and increase its mobile size (via a media query), which made the mobile header logo larger and it shrinks on scroll.
-
The requester confirmed the fix worked after adjusting measurements, and asked to reduce the shrink amount on scroll to roughly 60% of its normal size.
-
The helper explained the shrink is controlled by the CSS selector “.scrolled-past-header .header__heading-logo” (currently set to width 75%) and suggested customizing/overriding that percentage.
-
The requester could not get this adjustment to work and asked for more detailed instructions.
Status: Partially resolved. The mobile logo enlargement is working; controlling the scroll shrink (target ~60%) remains unresolved pending clearer, step-by-step CSS override guidance. Images/screenshots are used to show the before/after result and the CSS class responsible for the shrink behavior.
Hi @MichKev22
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.
8a86ec.myshopify.com
Password: dahcko
Hi @MichKev22
Is this the result you want?
- Logo header on mobile is bigger than before. When scrolling down, it will be smaller again.
To be able to save the code snippets and have them actually work on your website, please follow these steps:
-
Step 1: Go to Online store => Themes => Edit code
-
Step 2: Find the file “bass.css” scroll to the bottom and paste the code that we fixed for you below.
/* START BSS FIX */
@media screen and (max-width: 989px) {
.header__heading-link.link.link--text.focus-inset {
display: flex;
justify-content: center;
}
.header__heading-logo {
width: 2000%;
}
}
/* END BSS FIX */
- Step 3: Save your file and check the result.
We hope that it will work for you.
The solution you gave me works but the measurement had to be adjusted.
I’d like to know how to shrink less the logo when scrolling down. I would like it to be roughly 60% of what it normally is.
Hi @MichKev22
When you move your mouse down, you will see class “.scrolled-past-header .header__heading-logo” with width 75% to shrink the logo header. So you can customize this % to resize when scrolling. Also, you can create CSS to override this class.
Could you please be more detailed? I didn’t manage to let it work.