-
Posts
-
When viewing the mobile version of my site, the mobile menu is covering part of the logo.
How can this be fixed? It isn’t doing this in the demo.
Hey GrapePress!
Your logo is very wide. Are you wanting to shrink it with CSS? If so then try this out,
@media only screen and (max-width: 479px) { .responsive .logo a, .responsive .logo img { width: 90% !important; } }You can keep adding those lines to your custom CSS and play around with the width settings to shrink it on different mobile screens.
Cheers!
ElliottHi Elliott,
This code shrinks the width, but then the logo just looks squished and unreadable.
The demo logo moves to the left as the screen is minimized. My logo is staying centered with the mobile menu covering it. Is there a way to fix it?
Hey!
Your logo is also left aligned and not centered. It’s just that it’s so wide that it runs into the menu on small screens. Besides editing your logo image to be smaller I don’t know what else to do.
We could add some CSS so when the screen gets to a certain width we can hide your main logo with CSS and add another smaller logo as a background image. If you would like to try that then this is the CSS you would use.
@media only screen and (max-width: 479px) { .logo img { display: none; } .logo a { background: url("URL to your image"); width: 80px; } }Cheers!
Elliott
- You must be logged in to reply to this topic.