Please share your store URL!
Thanks!
Hi, @craftywool , that issue isn’t happening for me. I did some experimenting and found a way to decrease the size of the cart icon but not the search icon. For the cart icon, you can adjust the height and width here:
Assets>base.css
[starting at Line 1957:]
.header__icon,
.header__icon–cart .icon {
height: 4.4rem;
width: 4.4rem;
}
For me, if I increase the logo’s size on mobile, then the right-hand icons get pushed off the screen. Not sure how to solve that, but I would probably try pushing the icons down below the logo.
I’m actually still using the Responsive theme because I decided I didn’t want to spend the time making all the tweaks I would want to the theme, but now I’m reconsidering. So if I figure out how to adjust the icons I’ll post it here.
Hi, thanks for the reply, we actually decided we wanted a different look to the site so we’ve changed to the Supply theme which coincidencly allows for a bigger logo
Hi Karen_jslin1
thanks for the reply, we actually decided we wanted a different look to the site so we’ve changed to the Supply theme which coincidencly allows for a bigger logo
This does not seem to work? It keeps the logo sized at 250. I can make it fixed smaller, but not fixed bigger with this suggest code.
I also looked a the website that this was a “solution” for: https://iamgreenminded.com/ and that logo still looks small as in the original complaint.
How can i get my logo bigger than the tiny size from default Dawn? Thanks!
I haven’t been able to get the mobile logo to resize correctly with the suggested code, unfortunately.
To adjust the logo for larger screens, go to Sections>header.liquid.
Scroll down to line 324 (or thereabouts, depending on whether changes have been made to the original file).
The line you’re looking for is {%- assign image_size = section.settings.logo_width | append: ‘x’ -%}
(right after {%- if section.settings.logo != blank -%})
Replace that line with {%- assign image_size = 450 | append: ‘x’ -%} 450 is the size I went with, but you could choose another size. This number should be the maximum size you want your logo to appear.
If that’s what you already did and it’s not working, then you may have some added code somewhere that’s conflicting with it.
I hope this helps!
Hi,
I am not able to get this, desktop version does work, but mobile doesnt. I dont know anything about media queries, could someone help?
Where should i modify it? This is the code:
{%- if section.settings.logo != blank -%} {%- assign image_size = 300 | append: 'x' -%} <img srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x" src="{{ section.settings.logo | img_url: image_size }}" loading="lazy" class="header__heading-logo"Hi Karen,
This worked for increasing the logo size, but now the header section is extremely large. Is there a way to now decrease the padding around the logo so that the header height isn’t so big?
Hi, Shadia. I haven’t encountered this issue, but you should be able to adjust the header padding in the base.css file in the Main Header Layout section. In my file, that starts at line 2163; however, I’ve adjusted code in various places so it’ll be a little different in your file (probably a bit earlier than that). I see two places where padding is applied, in .header and
@media screen and (min-width: 990px) {
.header {
The second one will only affect devices with a larger screen. I imagine the first one would affect all devices, so if you change padding there make sure to check it on mobile to make sure it doesn’t mess up the header on smaller screens.
Hi. I have update my dawn theme from version 3.0 to 5.0 and I cannot locate this code in this new theme but was able to find it on the version 3.0. I am not sure if it’s because version 5.0 has a different coding on header.liquid. Any thoughts on this would be appreciated.
Dear @Obvious84
I have just come across this feed with the code you supplied above for increasing the HEADER Logo size on Dawn Theme.
I used this code on my Dawn Theme (V3.0) and it worked perfectly - BUT I am currently in the process of working on the new Dawn Theme (V5.0), as it offers a few more options in some areas which are more helpful, and tried to find increase the HEADER Logo size with the same steps indicated above - but I found that this is nowhere in the coding of DAWN (V5.0) in order for me to cut and paste this code.
The code that I found is:
{%- assign image_size_2x = section.settings.logo_width | times: 2 | at_most: 5760 -%}
<img srcset=“{{ section.settings.logo | image_url: width: section.settings.logo_width }} 1x, {{ section.settings.logo | image_url: width: image_size_2x }} 2x”
src=“{{ section.settings.logo | image_url: width: section.settings.logo_width }}”
loading=“lazy”
class=“header__heading-logo”
width=“{{ section.settings.logo.width }}”
height=“{{ section.settings.logo.height }}”
alt=“{{ section.settings.logo.alt | default: shop.name | escape }}”
I was on the phone tonight with Shopify Support - where I requested for the Design Team to make this change to my Header Logo size and UNFORTUNATELY, the response was a hard NO !!! even though in my previous theme (DEBUT) over a year ago - I requested this from the Design Team it was actioned immediately.
Hoping you have some positive information to give me
Regards
Katerina
I’m working with version 3.0 so I don’t know how you would do it in 5.0. My feeling about the themes Shopify develops themselves is that when they discover people using coding hacks they don’t approve of for whatever reason, they change it in subsequent versions. (See KaterinaRoza’s comment below.) So my advice is that if 3.0 was working for you, go back to using that.
It’s pretty annoying, though. I’ve been working on switching my theme from Responsive and it’s really a pain in the ass getting things in Dawn to look the way I want. I feel like customizing Responsive is a lot easier and things usually work right after upgrading versions. I’ll be keeping my last Responsive theme version in case I decide I need to switch back at some point.
I can’t find where to input this code on the header.liquid file?
In Dawn 3.0, the section it’s in starts on line 341 (assuming you haven’t made any code changes above that). However, it looks to me like the code has changed a bit since this thread originally started, and I think it needs adjusting. (The code that I have in 3.0 is the same as in KaterinaRoza’s comment above from version 5.0.) If I figure it out, I’ll post the solution here.
I just need to size change for mobile! Not for desktop!
Oh, that’s probably going to be a lot more difficult or impossible. I wasn’t able to get it to work with mobile and eventually gave up.
Hi! Does this work on the current Dawn version? And, if so, where exactly can I find {%- assign image_size = section.settings.logo_width | append: ‘x’ -%} in header.liquid? I can’t seem to find it.
Thank you!