Trouble Menu on mobile devices

[iaiacocoi]

Hi,
Thanks for the support you gave when I was creating this website.
Now the site is alive and we are happy with that, you’ve been very good supporting us.
Though my client reported me that on her mobile device (iphone5) the menu symbol is impossible to click because is too close to the logo and every time she tries to hit the menu the page recharges because she actually hits the header logo. On other bigger screen devices (like iphone 6) this doesn’t happen because the screen is big enough.
I know our logo is pretty bigger that the logo you used in your demo but I am wondering if there is way to fix it.
My doubt is if there is a way through some css code to:
-make the logo smaller just for mobile devices.
or
.separate the space between logo and menu symbol just on the mobile device version?
or
upload a different version of the logo for the mobile device?
Could you please help me on that? What do you easily recommend to fix that?

Thank you so much for your help!

[JWSThemes]

This problem occurs because you have set the hard values (width and height) for the logo. We have two suggestions for you
1. You sould only set hard values on big screen
http://prntscr.com/f333ga
2. If you still want a big logo, please open source and edit
– Open file /theme/petta/framework/headers/header-v1.php
– Find and replace:
“col-xs-5 col-sm-4 col-md-2” by “col-xs-12 col-sm-4 col-md-2” (Note: Do not include double quotes: “”)
“col-xs-7 col-sm-8 col-md-10” by “col-xs-12 col-sm-8 col-md-10” (Like this http://prntscr.com/f336tw)
– Add your custom CSS:

@media (max-width: 767px){
.tb-header-wrap.tb-header-v1 .tb-header-menu .tb-menu {
text-align: center! important;
}
}
@media (max-width: 767px){
.tb-header-wrap.tb-header-v1 .tb-header-menu .tb-logo{
margin: 0 auto;
}
}

Please back if you have any problem!

[iaiacocoi]

HI, thanks I solved in a different way, charging two different logos one for mobile, one for big screens with some custom css. Thanks anyway!

[Author]

Posts