Hello,

Can i please see a link where are you having this? The hamburger menu shows up when the mobile screen size is reached. It does not have such isues.

Best regards!

Hello,

Please add this code into your custom css box:

@media (max-width: 480px) {
#logo img {
    max-width: 100% !important;
    margin-left: 8% !important;
}}

Result screenshot.

Best regards!

Hello,

Since the mobile width is limited to 480px, the logo too should be within this width. There isn’t a specific size set up for the logo. If you keep it under 250px wide.

-Theme gives the option to have two logos. The dark version, is usually a dark colored logo. Which is used in headers where the background is in light color.
And the light logo is the opposite. You upload a light colored logo which is used in cases when the header background is dark.
See the use of these two types here:
Dark logo in a white background: https://codeless.co/tower/default/business-corporate/
Light logo in transparent background: https://codeless.co/tower/default/

To specify which version should a page use, go to the page’s General Settings > Page Options & Style > Header Color Style for Header. See screenshot.

Best regards!

Hello,

The logo image width is still too wide for the mobile width. No matter how you edit it with custom css it will not be possible to keep the image resolution. What i can suggest you is to create a new logo only for the mobile version. Add this custom css into your custom css box:

@media (max-width: 480px){
#logo img.dark {
   content: url(https://codeless.co/tower/default/wp-content/uploads/2015/08/logonew.png);
}}

Upload the new logo into your Media and replace the url of the image in the code with your new logo url.

This way when the screen reaches the mobile size, the logo will be replaced by it’s mobile version logo. Which fits better the new dimensions.

Best regards!