Enlarging the logo in the Shopify Sense theme on both mobile and desktop. The logo appears too small on mobile and should be wider than the navigation on desktop; built-in theme limits prevent increasing width. Prior attempts with custom code did not help.
A proposed fix suggests adding CSS to base.css using media queries: set the logo’s min-width to 250px on screens ≤600px and increase the desktop menu gap to 30px on screens ≥900px. Media queries conditionally apply styles based on screen width.
After applying the CSS, no changes were observed. A preview URL was shared for verification, and additional guidance was requested.
No resolution yet. Action taken: tested CSS changes without effect. Next step: further troubleshooting and alternative solutions needed. The discussion remains open.
I am hoping to find a way to enlarge the logo on Sense theme. The logo file has no negative space impacting the size, and the logo width is at its fullest that the theme allows. It is way too small on mobile for sure, but I’d like it to be wider than the navigation on desktop as well… I’ve tried two different codes to bypass this width restriction with no success. Any tips would be appreciated!
url: hannahviaart.com
Thank you
Hi @blakelyhiner ,
Try adding below css in base.css file.
@media only screen and (max-width: 600px) {
img.header__heading-logo.motion-reduce {
min-width: 250px;
}
}
@media only screen and (min-width: 900px) {
.header--top-center .header__inline-menu>.list-menu--inline {
gap: 30px;
}
}
If you require further help to optimize or customize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
LuffyOnePiece
Thank you for this, it doesn’t seem to have changed anything though… here is the preview url: https://zd4ykbher81cl1b4-71374176290.shopifypreview.com
Hi, I was wondering if you had any other tips, this did not work for our site. Thanks!