Mobile Logo Padding

bruno111

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

bruno111

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

bruno111

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.