Mobile Logo issue

[Matt Phillips]

On mobile my logo is cut off a little. Im using it consultant.
I added custom css and its not making any difference. franpower.com

@media screen and (max-width:767px) {
.header .header-inner .logo{width:100%;}
}

[Sonl Sinha]

Hi,

Kindly go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

Add this code there:

@media screen and (max-width:767px) {
.header #logo img { max-width:100% !important; height:auto !important;}
}

Regards,
Chris

[Matt Phillips]

got it, It worked.
Id like to remove the ‘menu’ from the mobile version.

[Sonl Sinha]

Hi,

Kindly go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

Add this code there:

@media screen and (max-width:767px) {
.header_right nav, .mobile_nav a { display:none !important;}
}

Regards,
Chris

[Matt Phillips]

This removed the menu, however the logo is back to the original (too wide)

[Sonl Sinha]

Hi,

Kindly go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

Add this code there:

@media screen and (max-width:479px) {
.header #logo img { max-width:100% !important; height:auto !important;}
}

Regards,
Chris

[Matt Phillips]

Hi,
I paste this together and separate. Its either the logo works or the menu is removed, not both. Can you paste exactly what I should add to the CSS Box in its entirety to resize logo and remove menu from mobile.

@media screen and (max-width:767px) {
.header_right nav, .mobile_nav a { display:none !important;}
}
@media screen and (max-width:479px) {
.header #logo img { max-width:100% !important; height:auto !important;}
}

[Sonl Sinha]

Hi,

Kindly paste both css in custom css box.

For hide menu

@media screen and (max-width:767px) {
.header_right nav, .mobile_nav a { display:none !important;}
}

For logo resizing

@media screen and (max-width:479px) {
.header #logo img { max-width:100% !important; height:auto !important;}
}

Regards,
Chris

[Author]

Posts