Brooklyn Theme (MOBILE) Make header smaller

Solved
sanderdame
Tourist
11 0 3

Goodmorning everyone,

I have a question regarding the header of our website. (www.croom-sanitair.nl
As you can see on mobile the white part below the logo in the header is too big.
Is there a way to make it end just below the logo so it's smaller? 

IMG_05B213B6AAFB-1.jpeg

Accepted Solution (1)

Accepted Solutions
Zworthkey
Shopify Partner
2567 309 641

This is an accepted solution.

@sanderdame 
Add this code in theme.scss or gem-page.css

@media (max-width: 767px)
{
#r-1634885432805 {
 margin-top: -25px !important;
}
}

 

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

View solution in original post

Replies 7 (7)
dmwwebartisan
Shopify Partner
9824 2236 3077

@sanderdame 

1. Go to Online Store->Theme->Edit code 2. Asset->/theme.scss.liquid ->paste below code at the bottom of the file. 

 

@media screen and (max-width: 768px){
.site-header__logo img {
    max-height: 45px !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}
}

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Zworthkey
Shopify Partner
2567 309 641
@media screen and (max-width: 600px){
.site-header__logo img {
    max-height: 45px !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}
}

@sanderdame

add this code in theme.scss or theme.css

 

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com
sanderdame
Tourist
11 0 3

I'm sorry to say but the logo has only became smaller en the white part still the same, here is the screenshot:

(This is the same for both mentioned answers above)
IMG_BD1F3044877B-1.jpeg

Zworthkey
Shopify Partner
2567 309 641

Screenshot (52).png

i think you would like to remove this extra spacing.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com
sanderdame
Tourist
11 0 3

Yes exactly but I can't find any way to do this! Searched everywhere in the code and in the product page.

Zworthkey
Shopify Partner
2567 309 641

This is an accepted solution.

@sanderdame 
Add this code in theme.scss or gem-page.css

@media (max-width: 767px)
{
#r-1634885432805 {
 margin-top: -25px !important;
}
}

 

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

View solution in original post

sanderdame
Tourist
11 0 3

PERFECT, IT WORKED!