Mobile Logo Padding

edited June 2020 in Menu / Mega menu
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.

.logo{
padding-left:0px  !important;
                padding-top:20px  !important;
}

image

Comments

  • 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
  • edited 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.

    image
  • Hey,
    from what I see on the phone, the logo is aligned fine:
    Maybe try to check if your phone has cache cleared.
    thanks
  • 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.
Sign In or Register to comment.