[Support request] Changing Navigation Bar[s] Font Size

[robmac]

Hi Tom/Leo,

I may have raised a similar question a while back for another site.

But try as I may, I cannot increase my Top and Main Navigation Bar Font Sizes. I’ve tried the Customize/Typography feature and it changes it in the back-end, but doesn’t appear to in the front.

I’ve flushed my cache and looked at the site on my VPS and it all still looks the same size font to me.

I’ve now tried CSS as per below – still no luck!

.main-navigation a {
font-size: 21px;
}

.top-navigation a {
font-size: 22px;
}

The font sizes above, are just some random ones I’ve thrown in for testing it.

I’m not sure I’m on the right path here, any help appreciated. Thank you.

Regards,
Robert

[Leo]

Hi there,

The customizer option should work so let’s avoid CSS first.

Are you using a child theme? If so have a look at this: https://docs.generatepress.com/article/child-theme-issues/#import

Let me know 🙂

[robmac]

Hi Leo

Thanks for the initial advice. Much appreciated.

I’ve removed the code you sent me in the CHILD and [I think] in the Parent theme.

The issue has been addressed in the MAIN Nav bar, but the font is still smaller than desired in the TOP Bar and the top bar is now too short in its height. Could please offer anymore suggestions to address these two remaining issues?

Thank you,
Robert

[Leo]

You should be able to change the font size in Customizer > Typography > Top Bar.

Then increase the top and bottom padding to increase the size: https://docs.generatepress.com/article/top-bar-widget-area/#spacing

[robmac]

Hi Leo,

No luck sadly using Customizer > Typography > Top Bar for the TOP Menu. The CSS code below did do it however!

.main-navigation a {
font-size: 21px;
}

.menu-item-163455, a {
font-size: 23px;
}

Not really a clue “how” but it appears to work!

Regards,
Robert

[Leo]

Ahh they are link.

This might work better:

.top-bar a {
    font-size: 25px;
}

[Author]

Posts