Debut Theme - How To Make Logo Bigger

Karen9
Excursionist
36 0 6

Can anyone point me in the direction of where in the coding I can make my store name/logo larger in the header section on my website? I don't want it to be the full width of the page, but probably around twice the size it currently allows me to go

 

TIA

Replies 32 (32)

Karen9
Excursionist
36 0 6

anyone?

Sagar_Khadke
Shopify Partner
94 2 21

Hello Karen,

Please follow these steps to do that:-

  1. Login to your store 
  2. Click Customize > Header 
  3. There you can see "Custom logo width (in pixels)" just increase it to twice of current value and click save.

Hope that helps!

Have something to say? Or need to say Hi! just mail me at sagar.khadke03@gmail.com or visit https://sagarkhadke.myshopify.com
MomiIshq
Tourist
6 0 1

where is action please

Karen9
Excursionist
36 0 6

Thanks Sagar for your response, I have tried that, but it does not make my logo any bigger

Currently the pixel width is 5000... and the image is the same size even if it is set to 300!!

Sagar_Khadke
Shopify Partner
94 2 21

Hello Karen,

If it does not work in this way then you have to write the code yourself, for that-

  1. Login to your store
  2. Click on Action > Edit HTML/CSS
  3. Open the file theme.scss.liquid and at the bottom add this code

 

.site-header__logo-image img {

     max-width: 200px !important;

}

 

You can increase the value to 250 or 300 or whatever that you need.

Have something to say? Or need to say Hi! just mail me at sagar.khadke03@gmail.com or visit https://sagarkhadke.myshopify.com
Gluecksboutique
Explorer
52 0 12

Doesnt work 😞 

 

 

doghousetents
Visitor
2 0 1

Not working for me either

Medoo
Visitor
2 0 0

Hello! I found a  solution that will allow you to make the logo larger on desktop as well, because it is likely too small there as well. If you navigate to "Header.Liquid" within the code editor, you will be able to modify the max/min logo size easily. Between lines 355-361 you will find the parameters for the logo size. Edit the max height to whatever you would like and adjust the logo with the slider within the theme editor dashboard. 

The default "max" height is 60px, I changed it to 120px to suit my needs. This will change the max size for desktop, but both are equally too small IMO, so you will need to add the Style mentioned above in order to make the logo larger on mobile. It does work, make sure you use the .scss extension.

"id": "logo_max_height",

Medoo_0-1622623861716.png

 


"type": "range",
"min": 10,
"max": 120,
"step": 5,
"unit": "px",
"default": 15,

Karen9
Excursionist
36 0 6

Hi Sagar, thankyou very much, that helps alot 🙂 Just one other question, If I decided to make it the full width of the page, what piece of coding would I need for that? and would I need to figure out how to move the search bar (which is currently on the left hand side of my logo)?

Jose13
Shopify Partner
122 1 13

Hi! I tried the solution posted above, but still can't make my logo bigger, is there something I'm missing?

Karen9
Excursionist
36 0 6

Hi Jose, I still can't find out how to do this, if you can, will you please post it here?

Taniachz
Excursionist
13 0 6

Hi! I've found the solution for this in case you wanted an update.

* Go to themes - edit code - sections - header.liquid

* Then find with clrt+f the max of pixels that you were allowed before, for example 250 and change it to 300 (max), and save.

* Now when you go back to the theme editor you'll see that you can now go up to whatever amount you wrote on the code.

chapelboy
Visitor
1 0 0

That doesn't work.  There's nowhere in the Theme settings that allows you to adjust logo size, not from what I can see anywhere.  I did change the numbers in the CSS but it doesn't do anything.

Taniachz
Excursionist
13 0 6

It worked fine for me. You just have to find the line where the logo info is.

Unpossible
Tourist
4 0 7

The max-width property is applied the logo image element by the theme inline. You can override this as follows:

  • Go to  Online Store/Themes/Actions/Edit Code
  • Open 'theme.scss.liquid' from the Assets folder
  • Scroll all the way to the bottom and add in these lines of code (note, 290px was the width that worked for me, you should change that number to suit your logo and site).
.site-header__logo-image img {
  max-width:290px!important;
}
  • Hit 'Save' and this should do the trick.

Check that the logo is still good at smaller screen sizes as this will only affect sizes around laptop and above.

There are other references to how the max-width is set in other theme files, and this is an over-ride so a bit hacky. But it works and won't break anything.

 

 

tbaydave66
Visitor
1 0 0

can't get any of these suggestions to work.  any other suggestions?  Thanks

Veronikaden777
New Member
7 0 0
Hello! Can’t make that way logo bigger as well. Please help! Also I noted on the first same code extra space after exclamation mark, but I tried with space and without and still doesn’t work.
Veronikaden777
New Member
7 0 0
Need to make it as well!;)
Unpossible
Tourist
4 0 7

Sorry to hear that. Can you share your site address for me to check?

Veronikaden777
New Member
7 0 0
Unpossible
Tourist
4 0 7

Assuming you wan to make the logo 400px wide on desktop, try adding:

 

.site-header__logo img {
  max-width: 400px!important;
  width: 400px!important;
}

Adding in the 'width' as well works for me when I try it out in your site, though I don't need it on another site we built recently.

 

By the way, how big do you want the logo? I'm thinking it looks right at around 200px wide.

 

Hope this works for you, and good luck with sales!

Veronikaden777
New Member
7 0 0
Hello! Thank you for your reply. I appreciate! Could you please tell me all the way till this step, where exactly to enter this code, like which section in “edit code”? I’m assuming this code will be also in a very button of the section? And yes you are right I was able to play with it yesterday and made my logo bigger but now it’s a little bit needs to be smaller. Thank you.

Also I have another question. How I can delete extra space after header on the main page. Thank you so much and have a great day!
Unpossible
Tourist
4 0 7

For the steps to use this code, just see my first post in this thread (05-20-2020 10:03 PM).

 

To remove your extra padding below the header, in the same file where you put the logo code, also add:

 

.index-sections .shopify-section:first-child:not(.shopify-section--full-width) {
  margin-top: 10px;
}

You can change 10px to what ever suits your design. Also, your logo image has some extra white space top and bottom, so if you crop it more tightly before uploading it, that would also effect the header height.

Veronikaden777
New Member
7 0 0
Thank you, the size of the logo was able to change! It looks perfect now! The second code for the deleting the space doesn’t work at all. Can I send you pic of my screen somewhere please? Thank you.
ACreativeLife
Tourist
12 0 2

This worked great for me but now the logo is off center, any ideas?

 

.site-header__logo img {
max-width: 700px!important;
width: 700px!important;
}

roddelagency
Visitor
1 0 0

Did you find out how to center it? Mine is off centered too!

Medoo
Visitor
2 0 0

Hello! I found a  solution that will allow you to make the logo larger on desktop as well, because it is likely too small there as well. If you navigate to "Header.Liquid" within the code editor, you will be able to modify the max/min logo size easily. Between lines 355-361 you will find the parameters for the logo size. Edit the max height to whatever you would like and adjust the logo with the slider within the theme editor dashboard. 

The default "max" height is 60px, I changed it to 120px to suit my needs. This will change the max size for desktop, but both are equally too small IMO, so you will need to add the Style mentioned above in order to make the logo larger on mobile. It does work, make sure you use the .scss extension.

"id": "logo_max_height",

Medoo_0-1622623905639.png

 


"type": "range",
"min": 10,
"max": 120,
"step": 5,
"unit": "px",
"default": 15,

Najam_hasan
Visitor
3 0 0

let me know if you are still not able to change it. i did it in json

 

Kerri_Bennett
Shopify Partner
22 0 4

Thank you, this just worked for me on the Turbo theme and I've been searching for the solution for hours!! Thank you!!!!

CaitieJ
Visitor
1 0 0

Thank you so much! 😄 

DavidJT
Visitor
2 0 3

Worked for me. I changed to 500px then went back to edit the header of the theme where the max size was now 500px and not 250px

 

Thanks Taniachz

CMruz
New Member
5 0 0