make the header logo smaller on mobile only because it overlaps the menu - Support

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
June 24, 2024 at 3:34 am #1457410

Sandy
Participant

I need to make the header logo smaller on mobile only because it overlaps the menu. I tried the following (because it worked on another site) and a few other variations but they didn’t work. How is it accomplished?

@media only screen and (max-width:676px) {
#header .logo img {
transform: scale(0.5);
transform-origin: center left;
}
}

June 24, 2024 at 4:41 am #1457415
Ismael
Moderator
Hey Tanja,

Thank you for the inquiry.

We tried to log in to the site, but the username above doesn’t exist. Please check the info carefully or provide another admin account. In the meantime, you can try this css code to decrease the size of the logo on mobile view:
```
@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
  .responsive .logo img,
  .responsive .logo svg {
    max-width: 30%;
  }
}
```
Best regards,
Ismael
June 24, 2024 at 3:27 pm #1458232

Sandy
Participant

Thank you! I see now that I had 676px instead of 767px, which corrected my first issue.

A problem now is that the logo needs to be 0.5 (really tiny) in order to not be cut off on the bottom on mobile. Is it possible to make the vertical space for the logo taller on mobile so that the logo can be a reasonable size (e.g., 0.7 or 0.8) but not have the bottom cut off?

June 24, 2024 at 6:10 pm #1458477
Rikard
Keymaster
Hi,

You have this added in Quick CSS:
```
height: 54px !important;
```
Please try changing that to 62px instead.

Best regards,
Rikard
June 25, 2024 at 2:39 pm #1458642

Sandy
Participant

Thank you, perfect!

June 25, 2024 at 8:36 pm #1458743

Rikard
Keymaster

Hi,

Thanks for the update, we’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

Best regards,
Rikard
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘make the header logo smaller on mobile only because it overlaps the menu’ is closed to new replies.