Change Brooklyn Theme Logo Size

Solved
New Member
4 0 0

Hello, I know that this topic has been raised a lot of times over the years, but I am trying to change the logo size on my header but nothing seems to work. I've tried many solutions that I found online and changed parts of the code multiple times and no luck. Can anybody help? I would greatly appreciate it! 

0 Likes
Shopify Partner
17 2 2

Have you tried adjusting the logo width in the theme customizer?

Screen Shot 2020-12-05 at 3.54.21 PM.png

0 Likes
New Member
4 0 0

Yes, that was the first thing I tried but it is still too small. Any more suggestions?

0 Likes
Shopify Partner
17 2 2

This might sound like a dumb question but just to get it out of the way... The maximum width of a logo in the Brooklyn theme is 260 pixels. If you change the width to 260px in the customizer, does the logo indeed grow to that size?

Is your logo image trimmed so that there is no blank space around the graphic? If there is, you can increase the size by trimming that blank space.

If the issue is that you want the logo larger than 260px wide you will need to override the theme CSS which can have cascading effects. But let me know if that's where you're at.

0 Likes
New Member
4 0 0

When I try that it does increase I just would like it to be bigger than 260px, that's why I was trying to change the code. I am not sure if this is the same thing as white spacing but my logo image is a cutout image with a transparent background. Hope this helps.

0 Likes
Shopify Partner
17 2 2

This is an accepted solution.

The main concern in making the logo wider than 260 pixels is that it can push the navigation off-screen at certain browser sizes. If that's not an issue for you because your navigation is short enough you'll need to edit the theme's max width configuration settings.

First change the max logo width in the header.liquid file in the Sections folder:

Screen Shot 2020-12-05 at 4.42.29 PM.png

 

Then change the two logo_max_width settings in the settings_data.json file:

Screen Shot 2020-12-05 at 4.25.14 PM.png

Screen Shot 2020-12-05 at 4.27.04 PM.png

After you've changed those settings, go back to the customizer, re-upload your logo, and increase the size to your preferred width. Make sure the file you upload is at least as big as you'd like displayed on your site. Ideally it should be twice as big for high DPI screens.

 

Screen Shot 2020-12-05 at 4.45.31 PM.png

0 Likes
New Member
4 0 0

Thank you so much! This finally worked on my pc.

Two more questions for you. Is there any way to increase the logo size on mobile devices as well? And do you know how to increase the size of my products in my collection with the collage layout?

0 Likes
Shopify Partner
17 2 2

On mobile devices you'll need to increase the $drawerHeaderHeight value in two files: timber.scss.liquid and theme.scss.liquid. This value will depend on the shape of your logo and how big you want it. There will probably be some trial and error finding the right number. 

Screen Shot 2020-12-06 at 3.15.35 PM.png

Screen Shot 2020-12-06 at 3.46.18 PM.png

For your last question, that's not related to the logo size so I would recommend starting a new thread on the "Shopify Design" board.

0 Likes