Header logo disproportionall shrinked on mobile

I have a rather wide logo in the header, but this looks disproportionally shrinked in width on a mobile device.
It looks like for example the height is 100% and the width 60% shrinked.

Is there a way to get this solved?

Comments

  • Hello,
    please send a link to this page so we can take a look.
    thanks
  • Hi Bryan,

    I have sent the details via PM at Codecanyon.
  • Hey,
    this logo is too big. The way it is calculated allows for a retina logo to be updated and there are a lot of other things connected to it.
    The best way would be to create a smaller logo just for mobile, and upload it to theme options>resnponsive>header

    You can also try this css, but its not perfect:

    @media (max-width:960px) {
    body #Top_bar #logo img {
    height: auto !important;
    }
    a#logo {line-height:unset !important;}
    #Top_bar a.responsive-menu-toggle { top: 60px !important;}
    }
    thanks
  • Ah, good suggestion, didn't think of that - adding a separate mobile logo.
    Thanks for the help so far!
Sign In or Register to comment.