How can I reduce the header size in the Brooklyn theme?

Store Design
1

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
Picture1.png1986Ă—327 423 KB

Thanks!

1 Like
2

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.

1 Like
3

Hi Ketan,

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

I have also pm you the pw.

Thanks!

4

@MD2510

Thanks.

1 Like
5

@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;
}
2 Likes
6

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

Thank you very much

7

@MD2510

Thanks

can you please try this

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

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
9

@MD2510

please flow this one

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

2 Likes
10

it is not working for me bro

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

11

it is not working for me

1 Like
12

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
this is how the header is still looking1348Ă—600 50 KB

13

@Zeeshan10

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

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

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

1 Like
14

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

  1. 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

1 Like
15

@Zeeshan10

thanks but your store is password protect

16

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

Arch1_0-1641735973558.png
Arch1_0-1641735973558.png525Ă—199 5.46 KB

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

Thanks!

17

hello

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

can you help, please?

thanks you