Hello,
Im trying to recreate my current debut theme in dawn for the new store 2.0 features.
My current live store is in debut theme with a custom code to increase the logo size: https://iamgreenminded.com/
How do I fix the code in the new dawn theme to be the same as my debut with the larger logo?
Dawn:
Debut:
thank you
1 Like
Hello There,
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset >theme.scss.css and paste this at the bottom of the file:
header.site-header.logo--center h1.h2.site-header__logo img {
width: 100% !important;
max-width: 470px;
}
1 Like
@surfingcinv
Please share dawn theme stor URL
There is no them.scss.css in DAWN theme?
1 Like
Hi, I have been working on it as the non-active store. Do I have to make DAWN the active theme to share for you? Or is there another way?
thanks
Dawn is now the live theme
https://iamgreenminded.com/
Thank you
I’ve been tinkering around with this a bit. The applicable file in Dawn is base.css (in Assets). However, I tried adding the code above and it doesn’t work.
I believe the issue may be that in Config>settings_data.json the logo size is set to 250px, and it can’t be changed there. Trying to save a larger logo size returns the error message “Error: Setting ‘logo_width’ can’t be greater than 250”. I think that’s why using a max-width command with width:100% doesn’t work, because Dawn still sees the max width as 250px.
Here’s what I found works pretty well. In Assets>base.css, scroll down to line 1894 in the header code section. Insert this code there (in between the sections that start with .header__heading-link .h2 { and .header__heading-logo { 
@media screen and (min-width: 990px) {
.header__heading-logo {
height: auto;
min-width: 300px;
max-width: 450px;
}
}
Adjust the actual min and max sizes however you want (but min size needs to be greater than 250). (This might work without a max size, but it seems like a good idea to have one.) This code adjusts the logo size on larger devices while leaving the logo size on smaller devices (like phones) small. At least, it’s working decently on my laptop and iPhone.
The caveat to this is that Shopify is upsizing the 250 px logo that it automatically made for you, so if your logo looks blurry at the largest size you may need to add a specific URL for the logo at the correct largest size. (I haven’t tried this yet so I’m not sure where/how you would do that.)
2 Likes
Karen_Joslin1’s answer works for me, I think this is for the new versions because I only started using this theme less than a month ago.
@surfingcinv
Please share your Sections/header.liquid file code .
Thanks!
Thanks for this, it’s working great.
To fix the issue of the logo resolution, you can change the settings in header.liquid.
Assuming you want to change the image size to 350, you can do the following:
{%- assign image_size = section.settings.logo_width | append: ‘x’ -%}
to be changed to
{%- assign image_size = 350 | append: ‘x’ -%}
3 Likes
Fantastic, thanks for sharing!
This worked perfectly. Thank you!
Alex
Hi,
I want to adjust the size, but just for the mobile version. How can I do thant? Thanks for your response.
1 Like
@artifulboutique For this you need to make use of media queries to achieve this.
For example, if you are using the Dawn theme, you can do something like this:
@media screen and (max-width: 480px) {
.header__heading-logo {
height: auto;
width: 250px;
}
}
2 Likes
This was so helpful! Thank you! Is there also a way to adjust the logo size from the mobile view as well? Your solution worked well for the desktop but I can see my logo is still tiny on the mobile design.
Hi, @corinaaa , glad to help! The mobile size issue was solved by @Obvious84 in the reply above. Here’s their solution:
For this you need to make use of media queries to achieve this.
For example, if you are using the Dawn theme, you can do something like this:
@media screen and (max-width: 480px) {
.header__heading-logo {
height: auto;
width: 250px;
}
}
thank you so much for your help! I didn’t see the other message and this
works perfectly 
1 Like
Hi, I tried this solution and it worked in terms of increasing the logo size but it also increased the size of the search and cart icons that are to the right of the screen, massively, is there a way to correct this?
thanks
1 Like