need help on css class to override font size in modern communication site

Question

I am using an SPFX extension listed here: https://github.com/hugoabernier/react-application-injectcss to inject css in modern communication site.

I just need to know which css class should I use to override current font size for the global navigation. Can someone please help, thanks.

Answer 1

The following CSS style for your reference.

<style>
.ms-HubNav-nameLink{
    font-size:18px !important;
}
.ms-HorizontalNavItem-link{
    font-size:18px !important;
    padding:0 !important;
}
</style>

Answer 2

my suggestion is to fire up the console inspector and point to the items you are looking to customize

not sure if we're using the same site/nav, but this might be the one you are looking for:

/*modern*/
.ms-HorizontalNavItem-link {
    font-size: 16px;
}

/*classic*/
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item {
    font-size: 16px;
}