[Resolved] Change size font on Sub Navigation

Home Forums Support [Resolved] Change size font on Sub Navigation

Home Forums Support Change size font on Sub Navigation

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1124120
    Michiel

    How do I change the font-size of the sub navigation (drop down from main nav) ?

    #1124140
    Leo
    Staff
    Customer Support

    Hi there,

    Try this CSS:

    .main-navigation .main-nav ul ul li a {
        font-size: 15px;
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    Let me know if this helps πŸ™‚

    #1124143
    Michiel

    Hi, thanks for your reply, but why is this option not available in the main Customizer – I can change the main nav font size, but not the sub nav…

    #1124147
    Leo
    Staff
    Customer Support

    I’d say that it’s not very commonly requested which is why we are always happy to help with some quick CSS πŸ™‚

    If it comes up more often we will definitely consider adding it as an option.

    Thanks for your input!

    #1124170
    Michiel

    No worries and thanks!

    #1124178
    Leo
    Staff
    Customer Support
    #1676206
    Len

    Just spent ages finding this answer, thinking I had missed something so fundamental in the customiser. It would have taken far less time had I known I needed to use CSS.
    Can you please consider this for the customiser, or at least as a default force the dropdown font size the same as the menu font size so the one setting does both.
    Thanks.

    #1676358
    Leo
    Staff
    Customer Support

    Hi Len,

    I really feel like it doesn’t come up that often but will definitely consider it.

    Thanks for your input!

    #1731970
    Brent Wilson

    This css seems to change the font size of sub-navigation on desktop, but not on tablet/mobile. What do I need to add to the code to get it to change those as well?

    #1731973
    Elvin
    Staff
    Customer Support

    Hi Brent,

    did you mean the CSS on this reply?
    https://generatepress.com/forums/topic/change-size-font-on-sub-navigation/#post-1124140

    If so, that should apply to all viewports since there’s no @media(){} rule to make it exclusive to any viewport.

    Can you link us to the site you’re applying this on to check?

    If you wish to keep it private? Can you open a new topic for this? So you can use the private information text field. πŸ™‚

    A wise man once said:
    "Have you cleared your cache?"

    #1731974
    Brent Wilson

    https://wordpress-519773-1848753.cloudwaysapps.com/. I have added this css (so the dropdown font size should be the same as the main menu items):

    .main-navigation .main-nav ul ul li a {
        font-size: 17px;
    }
    #1731978
    Elvin
    Staff
    Customer Support

    Ah I see what you mean.

    That CSS loses on precedence against this CSS from the generated CSS by the customizer.

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

    To address that, add this CSS

    @media (max-width: 908px){
    .main-navigation:not(.slideout-navigation) .main-nav ul ul li a {
        font-size: 17px;
    }
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1731980
    Brent Wilson

    Thanks! That seemed to fix the issue. Did I do something wrong in the customizer that created the higher precedence css? Or would this be considered normal for it to be generating this code:

    @media (max-width: 908px)
    .main-navigation:not(.slideout-navigation) .main-nav ul ul li a {
        font-size: 14px;
    }
    #1731989
    Elvin
    Staff
    Customer Support

    Thanks! That seemed to fix the issue. Did I do something wrong in the customizer that created the higher precedence css? Or would this be considered normal for it to be generating this code:

    No it’s fine. It’s normal. The 14px is something inherited from what is set from the Primary Navigation’s font size on mobile found in Appearance > Customize > Typography > Primary Navigation. The font size value is what you’ve set minus 1.

    Example, if you’ve set 14px, the font size will be 13px on the generated stylesheet. Not exactly sure why Tom did this though. Will ask him when I get the chance.

    A wise man once said:
    "Have you cleared your cache?"

    #1731991
    Brent Wilson

    In this case, maybe it was -3? Set 17px, and the generated stylesheet had 14px.

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