Docs

[fabipaolini]

Hi guys!
I’m having an issue that’s kind of driving me crazy. Whenever I access my website from a mobile device of a smaller screen, the navigation menu moves to a line below forming 2 lines.
Is there any way I can program the logo to be smaller for smaller screens?

Here’s my page:

ANGLE OF MASTERY HOMEPAGE

thanks!!

[Prasant Rai]

Hello There,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

@media only screen and (max-width: 500px) {
    .x-brand img {
    width: 230px;
}

a.x-btn-navbar.collapsed {
    margin-top: 15px !important;
}

}

Thanks.

[fabipaolini]

Thanks! that worked for mobile, but not for the iPad. Any suggestions?
🙂

[Rupok]

Hi there,

You just need to adjust the max-width value of the media query. Let’s try updating the code :

@media only screen and (max-width: 980px) {
    .x-brand img {
    width: 230px;
}

a.x-btn-navbar.collapsed {
    margin-top: 15px !important;
}

}

Cheers!

[fabipaolini]

Hi! That didn’t work for iPad. I tried variations of the max width too.
Other suggestions?
Thanks!

[Joao]

Hi There,

The code should work, Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

[Author]

Posts