Brooklyn theme - reduce the header height for mobile

Aina23
Tourist
6 0 3

Hi,

 

I am stuck with reducing a header height for mobile screen in Brooklyn theme.

I can increase the height by adding some padding or margin but cannot decrease the height when it reached a certain point.

Can someone help to solve this?

Thank you!

 

 

 

0 Likes
Pallavi
Shopify Expert
1261 174 207

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes

Hello,
Please share your store URL with password (If Needed), So that I will give you proper solution here !

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Aina23
Tourist
6 0 3

Here is URL and password!

matcha-leaves.myshopify.com

Iwita10

Thank you so much!

 

Pallavi
Shopify Expert
1261 174 207

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

@media only screen and (max-width: 768px) {
.site-header .grid--table {
    height: 45px!important;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.css

@media only screen and (max-width: 749px){
.site-header .grid.grid--no-gutters.grid--table.site-header__mobile-nav {
    height: 47px !important;
}
}
If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Aina23
Tourist
6 0 3

@oscprofessional @Pallavi 

Thank you for your quick reply!

but I still get same result as below in Brooklyn theme...

I want to reduce the header little more so that it fits the slide image(below theme is not public yet)

Aina23_1-1618924121091.png

 

 

0 Likes
Pallavi
Shopify Expert
1261 174 207

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

@media only screen and (max-width: 749px){
.site-header .grid.grid--no-gutters.grid--table.site-header__mobile-nav {
height: 35px !important;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
Aina23
Tourist
6 0 3

@Pallavi 

Thank you for the suggestion

I tried all the answers and every possible way to change height but it never reduce the size than 80px..

p.s. I could reduce the screen for pc by removing margin and padding, but it won't affect for sp screen(because there is no margin&padding)

Aina23_0-1618926153861.png

Aina23_1-1618926625650.png