Change Brooklyn Theme Logo Size

[gg31]

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! 

[bergen]

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

[gg31]

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

[bergen]

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.

[gg31]

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.

[bergen · 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:

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

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.

[gg31]

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?

[bergen]

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. 

 

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.