Formatting Logo Box on Header for Square Online website

I cant figure out if the Logo box can be formatted to any other shape other than the square box. Our logo is more of a rectangle, so when I upload the logo file the system tries to shrink it to fit into a square box making logo really small. I cant figure out how to re-size the logo box.

3,639 Views
Message 1 of 6
Report
5 REPLIES 5
Alumni

Welcome to the Community, @kotlales!

 

There is a slider you can use in the website editor to increase the logo size, although that won't change the basic shape that the editor anticipates your image to be. It looks like you've already increased that as far as it will go.

 

One other option you could try is turning off the logo and adding a section to the top of your pages that includes the logo image instead.

 

The logo image you have on there now looks rectangular - you could also edit the image to remove what space on the top and bottom so the image itself is rectangular instead of square. Replacing with one like that should look larger for you.

 

Adam
Square Community, Platform
3,590 Views
Message 2 of 6
Report
Square Champion

Hi @AdamB 

 

Do some templates allow logos to be bigger than others? 

 

For example, how is the logo so big on: https://www.beasleys-orchard.com/ 

 

Was this accomplished by turning off the logo and adding a section to the top of the page that includes the logo image instead? 

3,375 Views
Message 3 of 6
Report

Was this accomplished by turning off the logo and adding a section to the top of the page that includes the logo image instead? 

 

No. The HTML is following the standard logo header format. No hacks. They're using a different header layout in HEADER -> CUSTOMIZE. And using a logo with very wide aspect ratio. 

3,371 Views
Message 4 of 6
Report
Square Champion

Thanks @CodeAndTonicHQ 

 

I will have to try this out on our website!

3,280 Views
Message 5 of 6
Report

Adding my tutorial here as well. 

 

The only way is to inject custom CSS by using javascript. 
Here's a tutorial that shows how to do just that. I'll make sure to update the blog post to include a code snippet for editing the logo size as I'm just doing that for a client. 

 

p.s. Feel free to get in touch if you'd like help with design edits.

3,423 Views
Message 6 of 6
Report