Can someone help me with the code to resize the logo area and make it larger on the craft theme? Right now it looks like this and I am wanting it to be at least twice as big if not as wide as the text that says "Cassidy Station at Estes Farms below. Thanks!
Hi @cassidystation ,
To resize your logo.
-
Go to Admin store > Online store > Themes > Customize.
-
Click on header on the left, then you will the “Custom logo width”, you can adjust the range to your liking
I did that already and the photo I showed above is with it on the widest setting. Do I need to adjust the size of the logo? Or is there a way to make the logo area even bigger?
1 Like
There is but I need to take a look of your website. Your website is password protected
Password is: Cassidy
You have to change your logo to SVG to make it crisp. It becomes blurry when I make it larger. This is what it looks like, see image below.
NOTE: It is not good to have larger header height since it will lower your website performance. Decrease the height of the logo as much as possible. Maybe stretch it instead so it is wider but height is less.
-
Go to Admin page > Online store > Themes > Actions > Edit code
-
Open the base.css file under the Asset folder. Then add the code below.
.header .header__heading {
width: 100%
}
header.header.page-width {
max-width: 80%
}
1 Like
Ok great, thank you! I will change to SVG. The current size of the logo is 4200x1600 Should I lower the height even more than that?
The image height size does not matter since you are changing it to SVG. Just put it edge to edge, height wise, so it easier to put in the website. The header height size should not go beyond 120px. This is based on experience.
When I changed the photo to SVG, it told me that file type was not supported for the logo/header photo. Any other advice on what I should do/try? Thanks!
You have to change the logo image to SVG.
-
Create a snippet under the Snippet folder, name it “logo-image”
-
Paste the SVG code you have.
-
Open the header.liquid under the Section folder
-
Find the code below.
- Replace it with the code below
{% render 'logo-image' %}
Could you walk me through these steps one more time from the beginning? It seems like you said I needed to add the photo to the library as well but remind me what order I need to do that in? Thank you!
I’m having the same issue. Where do I paste this code? I’m now in the base.css file.
Do I add it where the code ends?