[Resolved] Sub-menu items font size

Home Forums Support [Resolved] Sub-menu items font size

Home Forums Support Sub-menu items font size

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #948317
    Jim

    Hi. I have noticed the submenu items in the off-canvas panel have bigger fonts than the parent menu. Is this normal? (my off canvas begins at 768px)

    #948403
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #948654
    Jim

    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.

    #948986
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #949042
    Jim

    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.

    #949067
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #949075
    Jim

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

    #949091
    Leo
    Staff
    Customer Support

    Will do πŸ™‚

    #952395
    Jim

    How did this go?

    #952415
    David
    Staff
    Customer Support

    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.

    #952493
    Jim

    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.

    #952752
    David
    Staff
    Customer Support

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

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.