[Resolved] How to reduce mobile menu font size and move to 'float right' position

[Alice]

I use GP Premium for theme with header, navigation menu, and site identity. The site looks fine on computer, but look unprofessional on mobile phone. Two major problems,

1. the navigation menu font size is way too big on mobile, and can’t be reduced
2. the navigation menu stays in the middle of header, and UNDER the site identity log. I can’t move it to the ‘float right’ position as on a computer.

Any solution without having to write code?

[Leo]

Hi there,

1. You have this CSS added which is setting the font size for mobile:

@media (max-width: 1024px) {
    .main-navigation a {
        font-size: 25px !important;
    }
}

Remove that then the customizer options will work again.

2. Try our mobile header feature: https://docs.generatepress.com/article/mobile-header/

[Alice]

I removed the additional CSS and font size works! Thanks a bunch. Does the font size adjust automatically to a default mobile font size, or is programmable? It’s not that important, but just for my information purpose.

The second issue is the menu is not at the ‘float right’ position, but at the center. I tried the mobile header feature, but it will remove our company logo which is essential. Is there a way to keep the logo for site identity while using the mobile header, or keep navigation menu at the ‘float right’ position to the logo?

Paul

[Leo]

In the customizer setting, there is a toggle button for you to set the mobile font size.

You also need to upload a mobile header logo.

[Alice]

It works after the mobile log uploaded. Thank you.

[Leo]

No problem!

[Author]

Posts