Solved

Brooklyn Theme (MOBILE) Make header smaller

sanderdame
Excursionist
24 0 4

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)
Zworthkey
Shopify Partner
5581 642 1565

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;
}
}

 

View solution in original post

Replies 7 (7)

dmwwebartisan
Shopify Partner
12282 2546 3694

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Zworthkey
Shopify Partner
5581 642 1565
@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

 

sanderdame
Excursionist
24 0 4

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
5581 642 1565

Screenshot (52).png

i think you would like to remove this extra spacing.

sanderdame
Excursionist
24 0 4

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
5581 642 1565

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;
}
}

 

sanderdame
Excursionist
24 0 4

PERFECT, IT WORKED! 🙂