Mobile Logo Padding

bruno111 · June 2020

Hi,

I need to play with the logo padding on mobile - as you can see from the screenshot, it collides with the navigation menu.

I managed to use CSS for the vertical padding but it seems that for horizontal padding I cannot use negative values. I just need to move the logo to the left possibly with the same left padding like the hamburger menu's right padding.

Also - I need to decrease the header height little bit as there is too much space below.

Thanks for help. It's this website.

@media(max-width:768px){

.logo{

padding-left:0px !important;

padding-top:20px !important;

}

Bryan · June 2020

Hello,

please do not use any custom code. Just use the minimalist setting in theme options>responsive>header for the logo.

If the logo is too big, upload a smaller logo just for mobile devices in theme optioons>responsive>header.

thanks

bruno111 · June 2020

Even if I use smaller logo and Minimal settings for responsive header, it looks like this.

I really need to align it with the navigation menu on the other side - same padding and same vertical alignment.

I reckon it's 20px from the top and 20px from the left side.

Well, I used to code above and 15px top padding and it seems right.

if there is another way to do it without a code, I'll be glad to know. Thanks.

Bryan · June 2020

Hey,

from what I see on the phone, the logo is aligned fine:

https://prnt.sc/srq1u5

Maybe try to check if your phone has cache cleared.

thanks

bruno111 · June 2020

It is now.

I still had to use 20px top padding, without this the logo was all the way to the top of the screen.

But it's solved now.

Mobile Logo Padding

Comments

This website uses cookies