Reducing Padding at the TOP + BOTTOM of my logo (mobile view)

Site URL: https://www.byelsapapa.com

Hiya,

I am struggling to decrease the spacing between my logo and line in the header... (in mobile view).

I'd like the line and banner to be closer to my logo and hamburger menu.

Do you have a CSS code to fix this?

Many thanks!

It looks like you change burger to normal menu on mobile. Do you still need help?

Hi 🙂

Yes I still need help. Do you have a CSS code or something else to fix this?

Thanks so much in advance!

Site URL: https://www.byelsapapa.com/

Hi,

I have tried the CSS code on this topic but it doesn't work for me.

I want to (massively)) reduce the padding at the TOP and BOTTOM of my logo. How can I do this?

Thanks so much in advance!

The image file that you've uploaded for the logo has a lot of vertical white space above and below the logo (as highlighted by the checkerboard below):

If you edit the image file to remove the space above and below the logo, this will reduce the padding in the header.

Was this post helpful? Please give feedback by clicking an icon below  ⬇️

7 hours ago, paul2009 said:

The image file that you've uploaded for the logo has a lot of vertical white space above and below the logo (as highlighted by the checkerboard below):

If you edit the image file to remove the space above and below the logo, this will reduce the padding in the header.

Was this post helpful? Please give feedback by clicking an icon below  ⬇️

Very good point. I tried but it reduces the space on the Desktop + iPad view... but not on mobile view 😞 
Is there a CSS code to fix this ?

9 minutes ago, elsapapa said:

I tried but it reduces the space on the Desktop + iPad view... but not on mobile view

There's a Logo Width setting in Site Styles that is specific to Mobile: Branding. If you reduce this from 150px, even though the logo is quite tall (it appears square), this should reduce the height of the header. 

There's only 16px of vertical padding outside the logo so this isn't having much of an effect.

Did this help? Please give feedback by clicking an icon below  ⬇️

10 minutes ago, paul2009 said:

There's a Logo Width setting in Site Styles that is specific to Mobile: Branding. If you reduce this from 150px, even though the logo is quite tall (it appears square), this should reduce the height of the header. 

There's only 16px of vertical padding outside the logo so this isn't having much of an effect.

Did this help? Please give feedback by clicking an icon below  ⬇️

Thank you, yes I've tried this before... It doesn't make much of a change. I guess it is just the shape of the logo? And won't be able to reduce the padding?

The padding isn't the issue - it's the space within the image. If you don't want to crop the image file, you could achieve the same effect by adding some negative margin like this:

.Mobile-bar-branding-logo {
  margin: -20px 0!important;
}

16 hours ago, paul2009 said:

The padding isn't the issue - it's the space within the image. If you don't want to crop the image file, you could achieve the same effect by adding some negative margin like this:

.Mobile-bar-branding-logo {
  margin: -20px 0!important;
}

Thank you, I have managed something with your help!