[mustafa oParticipant]

Hi,
Mobile menu font size is too small. How can I increase it?

Thanks.

[SupportMember]

Hi There

Add the following line of code in Customizer > Custom > CSS

.x-navbar .x-navbar-inner .x-nav-collapse .sub-menu a{
font-size:1.5rem;
}

you can play around with the value 1.5 to increase / decrease font size accordingly.

[mustafa oParticipant]

This reply has been marked as private.

[RadModerator]

Hi mustafa,

Your site was password protected. But the code given above should work. You can also add “!important” to force changes.

Example :
font-size:1.5rem!important;

Or this :

@media (max-width: 979px) {
    .x-navbar .x-navbar-inner .x-nav-collapse a{
       font-size:1.5rem!important;
    }
}

[mustafa oParticipant]

Hi,
The second solution you have proposed (media query) worked well.

Thanks for your help.

[SupportMember]

Hi Mustafa,

You’re Welcome!

Glad that it works.

Thanks

[Joshua MParticipant]

Hi Guys,

I’ve noticed since a recent update that the sizing of my mobile menu font is now tiny. I checked that my CSS matches as per this post (I first learnt how to increase it with this post) but no success.

Has there been a change to some of the objects and this CSS will no longer work because of it?

Also, I really like the new menu structure you have for Ethos, but even when I remove all CSS from the custom field in Customizer I can’t achieve the new look. I am using a child theme and everything is up to date including my wordpress install.

My website is http://beardspo.com

[Paul RModerator]

Hi Joshua,

You can try this code instead.

@media (max-width: 979px) {
    .x-navbar .mobile .x-nav li>a {
       font-size:15px !important;
    }
}

Change 15px with your desired font size.

Can you specify which new structure you are referring too. It looks like you have the same structure with the ethos demo
but you just have a different font.

Thanks

[Author]

Posts