Solved

Brooklyn Theme - Reduce Header Size

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!

Accepted Solutions (3)
KetanKumar
Shopify Partner
36839 3635 11972

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

View solution in original post

KetanKumar
Shopify Partner
36839 3635 11972

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

View solution in original post

KetanKumar
Shopify Partner
36839 3635 11972

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

View solution in original post

Replies 16 (16)

KetanKumar
Shopify Partner
36839 3635 11972

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!

KetanKumar
Shopify Partner
36839 3635 11972

@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
36839 3635 11972

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

KetanKumar
Shopify Partner
36839 3635 11972

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
36839 3635 11972

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 

KetanKumar
Shopify Partner
36839 3635 11972

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

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

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
Shopify Partner
36839 3635 11972

@Zeeshan10 

thanks but your store is password protect 

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
Arch1
Visitor
3 0 0

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

Arch1_0-1641735973558.png

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

Thanks!

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

Zeeshan10
Tourist
4 0 2

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 lookingthis is how the header is still looking

zoharush555
Tourist
4 0 1

hello

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

can you help, please?

thanks you