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!
Solved! Go to the solution
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.
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:
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.
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.