Brooklyn Theme (MOBILE) Make header smaller

Store Design
1

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
IMG_05B213B6AAFB-1.jpeg1170×2532 195 KB

2

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

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
IMG_BD1F3044877B-1.jpeg1170×2532 198 KB

5

Screenshot (52).png
Screenshot (52).png586×589 166 KB

i think you would like to remove this extra spacing.

6

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

7

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

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

PERFECT, IT WORKED! :slightly_smiling_face: