1

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. enter image description here

  • can you share screenshot of global navigation? – Siddharth Vaghasia Jun 11 at 15:35
  • Just added, I am not sure from top level, what class to use to make sure the navigation font size can be increased, Home is a hub site and operations is a team site, I will have more team site links over the time – mdevm Jun 11 at 15:45
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>
  • Thanks LZ_MSFT always for helping.This works and increases font size for all the links including hub site link. One issue, I am seeing is by default (before adding CSS), the hub site link is not aligning with the team site links, please see screenshot added in the question description, is this by design? – mdevm Jun 12 at 13:00
  • Add padding:0; in ms-HorizontalNavItem-link class, I modify the code, you can check if. – LZ_MSFT Jun 13 at 1:37
  • Excellent thank you, that works. – mdevm Jun 13 at 2:06
1

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;
}
  • thanks Tiago, this works for the team site links and does a great job. However the hub site link does not get affected by the css, is there a different css class needs to be used for hub site link called Home? – mdevm Jun 11 at 15:56
  • you should check if your style is getting injected. either that or it might be using the classic mode. give it a try. answer updated – Tiago Duarte Jun 11 at 16:41
  • classic site uses master page concept...to add css on classic site you have to add it in master page – Siddharth Vaghasia Jun 11 at 17:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.