Brooklyn Theme - Reduce Header Size

Solved
Highlighted
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!

1 Like
Highlighted
Shopify Partner
7471 1032 2595

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
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
Highlighted
Shopify Partner
7471 1032 2595

@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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Shopify Partner
7471 1032 2595

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Tourist
5 0 3

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

Thank you very much

0 Likes
Highlighted
Shopify Partner
7471 1032 2595

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
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;
}
}

2 Likes
Highlighted
Shopify Partner
7471 1032 2595

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like