Brooklyn Theme - Reduce Header Size

Solved
MD2510
Tourist
5 0 3

Hi There!

Can I seek some kind advice on how I can reduce the size of my header? It is too chunky right now.
 
Ideally I would like it to be the same size as my announcement bar.
 
Picture1.png
 

Thanks!

KetanKumar
Shopify Partner
20323 2106 7616

Hello, @MD2510 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MD2510
Tourist
5 0 3

Hi Ketan,

Thanks for your prompt response, my url is www.theweekendprints.com.

I have also pm you the pw.

Thanks!

0 Likes
KetanKumar
Shopify Partner
20323 2106 7616

@MD2510 

Thanks.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
20323 2106 7616

This is an accepted solution.

@MD2510 

1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.

.site-header {
    padding: 5px 0;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MD2510
Tourist
5 0 3

@KetanKumar This works perfectly for desktop! How can I do the same for mobile?

Thank you very much

0 Likes
KetanKumar
Shopify Partner
20323 2106 7616

This is an accepted solution.

@MD2510 

Thanks 

can you please try this

@media screen and (max-width: 768px) {
.site-header .grid--table {
    height: auto;
}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MD2510
Tourist
5 0 3

Hi Ketan,

This is amazing, thank you so much.

Just to summarise for those facing the same problem, you will need to paste the codes in these 2 places.

Under timber.scss.liquid

.site-header {
padding: 5px 0;
}

Under theme.scss.liquid

@media screen and (max-width: 768px) {
.site-header .grid--table {
height: auto;
}
}

KetanKumar
Shopify Partner
20323 2106 7616

This is an accepted solution.

@MD2510 

please flow this one

Asset->/timber.scss.liquid->paste below code at the bottom of the file.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Zeeshan10
Tourist
4 0 2

it is not working for me bro

i did all the steps in brooklyn theme but the header is still big

0 Likes