Dawn 2.0 theme Logo Size

[surfingcinv]

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

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. 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;
}

[dmwwebartisan]

@surfingcinv 

Please share dawn theme stor URL

[surfingcinv]

There is no them.scss.css in DAWN theme?

[surfingcinv]

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

[surfingcinv]

Dawn is now the live theme

https://iamgreenminded.com/

Thank you

[Karen_Joslin1]

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.)

[ejames-dev]

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.

[dmwwebartisan]

@surfingcinv 

Please share your Sections/header.liquid file code .

Thanks!

[Karen_Joslin1]

Great!

[Obvious84 · Accepted solution]

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' -%}

[Karen_Joslin1]

Fantastic, thanks for sharing!

[ianjh]

Perfect. Thanks 

[surfingcinv]

This worked perfectly. Thank you!

Alex

[artifulboutique]

Hi, 

I want to adjust the size, but just for the mobile version. How can I do thant? Thanks for your response. 

[Obvious84]

@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;
      }

}

[corinaaa]

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.

[Karen_Joslin1]

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;
      }

}

[corinaaa]

thank you so much for your help! I didn't see the other message and this
works perfectly 🙂

[craftywool]

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