Brooklyn Theme - Reduce Header Size

[MD2510]

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.

Thanks!

[KetanKumar · 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;
}

[KetanKumar · Accepted solution]

@MD2510 

Thanks 

can you please try this

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

[KetanKumar]

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.

[MD2510]

Hi Ketan,

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

I have also pm you the pw.

Thanks!

[KetanKumar]

@MD2510 

Thanks.

[KetanKumar · 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;
}

[MD2510]

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

Thank you very much

[KetanKumar · Accepted solution]

@MD2510 

Thanks 

can you please try this

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

[MD2510]

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 · Accepted solution]

@MD2510 

please flow this one

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

[Zeeshan10]

it is not working for me 

[KetanKumar]

@Zeeshan10 

Sorry for facing this issue, it's my pleasure to help us.

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.

[Zeeshan10]

Actually I have two issues if you can solve either of them it will do.

1) I actually want to use the Minimal Blue theme but after setting up my store on Minimal Blue I realized that theme doesn't support video player but I read few article on shopify community and YouTube that it can be altered from edit code option by few basic coding
can you guide me related to the same ?

https://youtu.be/SAMY8jBmlZ4

https://shopify.dev/tutorials/add-theme-support-for-rich-media-3d-and-video

2) So I shifted to Brooklyn Blue, but the drawback is that firstly it doesn't support header and footer (as the link increases in header) and secondly the logo shows in the Centre, so it blends with the slideshow when using transparent header and when using a white header the header width is way too big.

I would be most grateful if you can solve problem no 1 

my store URL- quickhackss.myshopify.com

[KetanKumar]

@Zeeshan10 

thanks but your store is password protect 

[Arch1]

Hello - this did not work for me.  I am using the Brooklyn theme and absolutely nothing happened.

Did I do something wrong?  Please advise my header is huge.

Thanks!

[Zeeshan10]

it is not working for me bro

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

[Zeeshan10]

Please guide me.

in my brooklyn theme customization i went to edit code > Assets> timber.scss.liquid> scrolled to the bottom> pasted the code below> but it did not worked for me>this is how the header is still looking

[zoharush555]

hello

I tried this one on impulse theme and it's not working for me

can you help, please?

thanks you