Sub-menu items font size

Hi there,

I believe you have this CSS added:

.slideout-navigation.main-navigation.do-overlay .main-nav ul ul li a {
    font-size: 1em;
}

Let me know if this helps :)

I have seen it via inspect element but I don't have such code in my custom CSS. Seems like the theme is outputting the code via offside.min.css in GP Premium menu plus.

Hmm I don't think so as GP only uses em for font size.

Can you clear and disable the caching plugin so I can see the source of that piece of code?

Let me know :)

I have actually found that code inside /gp-premium/menu-plus/functions/css/offside.menu.cssas shown here. Look it up inside the theme files and come back to me.

My bad. You are right :)

I'll check with Tom to see why that is needed in there or if it's a mistake.

You can use this to change it for now:

@media (max-width: 768px) {
    .slideout-navigation.main-navigation.do-overlay .main-nav ul ul li a {
        font-size: 14px;
    }
}

Let me know :)

That worked. Let me know what you find out. thanks.

Will do :)

How did this go?

Hi there,

EM sizes are relative to their parent. In the case of a sub menu the relative parent is actually the body of the site. In other words the sub menu always equals the body font size. In your case that is 17px.

This is intentional as this ensures that a sub menu is always the same size as the body text. Which should be the smallest size font you should use for any important content.

Personally i would increase the off canvas menu item font size to a minimum of 17px. This will make the elements a larger click target for better accessibility. To note - google may penalise you with "Text too small to read" error in the search console if the font is less than 16px.

Thanks, David. 17px looks just too big for mobile UX on my site. I settled for 16px instead. Maybe a submenu option needs to be introduced in off-canvas typography settings.

You're welcome.
I'll pass on the suggestion.