How to change mobile logo width for Retina theme

Store Design
,

Topic summary

A user seeks to increase the mobile logo width in Shopify’s Retina theme beyond the default slider limit in the header customization section.

Problem: The theme’s built-in slider caps mobile logo width at 100px, and initial CSS attempts haven’t worked.

Proposed Solutions:

Multiple responders offered CSS code snippets targeting different selectors:

  • Manoj_j suggested adding media query code to theme.css or theme.scss.liquid targeting .site-header__mobile-image img with adjustable max-width values (e.g., 180px)

  • richaerd recommended similar approach using .site-logo img selector in retina.css with 200px example, noting users should inspect their specific theme version to confirm the correct CSS class

  • namphan proposed a simpler method: adding --mobile-logo-width: 200px to .site-header__logo via Customize > Theme settings > Custom CSS

  • SEOAnt-Vera suggested adding inline styles to theme.liquid targeting .site-header__logo-image and related classes with width:115%

Status: The issue remains unresolved as the original poster reported the initial CSS solutions didn’t work. One helper offered direct assistance via collaborator access to troubleshoot further.

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
1

Heya, how do I change the mobile logo width for Retina theme? I want to make it wider than the slider will allow in the header customisation section. I think I may have to adjust the max width in the coding. Thank you in advance.

2 Likes
2

Hi @forrestlake ,
I hope this message finds you well.
Please share your store url and password if password protected .
Thanks
Manoj

3

Hello! Here’s my website: https://kingsophiesworld.co.uk/

5

Hey Rajat, thanks for your response, I tried adding your code to the theme.liquid file, I still can’t make the mobile logo width any larger than the 100px on the slider

6

Hey @forrestlake ,

No worries at all - please ping me on email so I can take a closer look. Thanks! https://www.rajatweb.dev/

7

Hi @forrestlake ,
Go to Online Store → Themes → Edit code.
Find theme.css / theme.scss.liquid / base.css
Addthis code at the bottom

/* Force wider mobile logo  */
@media screen and (max-width: 767px) {
  .site-header__mobile-image img {
    max-width: 180px !important; /* Adjust this value */
    width: 100% !important;
    height: auto !important;
  }

  .site-header__wrapper {
    --mobile-logo-width: 180px !important; /* Adjust to match above */
  }
}

Adjust the values as required
Save and refresh preview
If I’m able to solve your problem, please don’t forget to like and mark it as the solution. This will also help others who face the same issue.
Thanks
Manoj

8

Heya, thank you, I tried adding this code to the theme.css, theme.css.liquid and it still won’t work.

9

Hi @forrestlake ,
Please share the collaborator code with me via a personal message (it should not be shared publicly). Once I receive it, I’ll make your logo wider.
Thanks
Manoj

10

Hello,

You’re correct in the Retina theme the logo width on mobile is capped by a max-width setting in the CSS. The slider in the theme editor is just a safe range, but you can override it if you want your logo to display wider.

Here’s how you can adjust it:

  1. From your Shopify admin, go to Online Store → Themes → Edit code.

  2. Open the theme.scss.liquid or retina.css (depending on your version) under Assets.

  3. Add this code to the bottom:

/* Adjust mobile logo width in Retina theme */
@media only screen and (max-width: 749px) {
  .site-logo img {
    max-width: 200px !important; /* increase this value as needed */
    width: auto !important;
    height: auto !important;
  }
}

You can adjust 200px to whatever width you prefer.

Notes:

  • Use @media only screen and (max-width: 749px) so the change only affects mobile.

  • If you want the logo to scale proportionally, leave height on auto.

  • If you don’t see .site-logo img in your version of Retina, use your browser’s Inspect tool to check the exact class wrapping the logo (sometimes .header-logo img). Then update the selector in your CSS accordingly.

This will override the theme’s built-in max-width limit and give you more flexibility for the mobile logo size.
Best,
Richaerd
Shopify Partner & Ecommerce Expert

11

Hi @forrestlake,

Please go to Customize > Theme settings > Custom CSS and add code:

.site-header__logo {
    --mobile-logo-width: 200px;
}

You can also change it yourself

12

You can add below code at the bottom of theme.liquid and the width of logo shall be changed:

<style>
.site-header__logo-image, .site-header__transparent-image, .site-header__mobile-image {
width:115% !important;
}
</style>

image
image1808×836 83.8 KB

13

Does anyone on this thread have any recommendations for a text-based logo? Ours keeps wrapping when the font size is larger than 22px and it’s really small. I’ve tried the steps outlined in these troubleshooting steps and have made the same changes to the min/max width in the theme.css.liquid, but it doesn’t seem to allow me to widen the logo for either desktop or mobile

1 Like
14

@evanorden can you please share your website link?

15

Hello, @forrestlake

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / base.css file and paste the code in the bottom of the file.

@media screen and (max-width: 768px) {
  .site-header__logo .site-header__mobile-image {
    max-width: 250px !important;
  }
}

Adjust max-width value to your desired width.

Thanks!