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

Improve this question
2
  • can you share screenshot of global navigation?
    – Siddharth Vaghasia
    Jun 11, 2019 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, 2019 at 15:45

2 Answers 2

Reset to default
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>
Improve this answer
3
  • 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, 2019 at 13:00
  • Add padding:0; in ms-HorizontalNavItem-link class, I modify the code, you can check if.
    – LZ_MSFT
    Jun 13, 2019 at 1:37
  • Excellent thank you, that works.
    – mdevm
    Jun 13, 2019 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;
}
Improve this answer
3
  • 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, 2019 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, 2019 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, 2019 at 17:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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