Dawn 2.0 theme Logo Size

Solved
surfingcinv
Excursionist
22 0 4

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:

surfingcinv_0-1630646513002.png

Debut:

surfingcinv_1-1630646541707.png

 

thank you

 

Accepted Solution (1)

Accepted Solutions
Obvious84
New Member
2 1 5

This is an 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' -%}

View solution in original post

Replies 35 (35)
ZestardTech
Shopify Expert
4016 681 937

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;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
dmwwebartisan
Shopify Partner
11324 2417 3481

@surfingcinv 

Please share dawn theme stor URL

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
surfingcinv
Excursionist
22 0 4

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

surfingcinv
Excursionist
22 0 4

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
Excursionist
22 0 4

Dawn is now the live theme

https://iamgreenminded.com/

 

Thank you

 

Karen_Joslin1
Excursionist
19 1 4

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
New Member
1 0 0

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
Shopify Partner
11324 2417 3481

@surfingcinv 

Please share your Sections/header.liquid file code .

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Karen_Joslin1
Excursionist
19 1 4

Great!

Obvious84
New Member
2 1 5

This is an 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
Excursionist
19 1 4

Fantastic, thanks for sharing!

ianjh
Excursionist
17 1 6

Perfect. Thanks 

surfingcinv
Excursionist
22 0 4

This worked perfectly. Thank you!

Alex

artifulboutique
Excursionist
37 0 9

Hi, 

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

Obvious84
New Member
2 1 5

@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
New Member
2 0 1

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
Excursionist
19 1 4

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
New Member
2 0 1
thank you so much for your help! I didn't see the other message and this
works perfectly 🙂
craftywool
Tourist
15 0 3

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