[Resolved] Change size font on Sub Navigation

[Fleur]

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

[Leo]

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 🙂

[Fleur]

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…

[Leo]

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!

[Fleur]

No worries and thanks!

[Leo]

No problem 🙂

[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.

[Leo]

Hi Len,

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

Thanks for your input!

[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?

[Elvin]

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. 🙂

[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;
}

[Elvin]

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;
}
}

[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;
}

[Elvin]

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.

[Brent Wilson]

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

[Author]

Posts