SharePoint Document Issues

How to Change SharePoint Navigation Font Size and Color

Maira Mehtab Sep 27, 2026 869 views

Question details

The user needs to change the font size and color of the navigation menu in Modern SharePoint, which lacks native UI styling controls for these specific attributes.

Product: Microsoft SharePoint
Device & OS: not provided
Scenario: Customizing the visual branding and navigation styles of a Modern SharePoint site or tenant to meet specific design requirements.
Observed behavior: Modern SharePoint does not natively support independent custom font sizes and colors for navigation, requiring workarounds unlike classic SharePoint.

Before you start

Before applying custom CSS, ensure you have SharePoint Administrator privileges and access to either the tenant app catalog or the specific site collection app catalog.

Solution 1Recommended

Deploy an SPFx Extension to Apply Custom CSS

Since Modern SharePoint lacks native UI settings for navigation fonts, you must use an SPFx CSS injection extension to apply custom styles safely.

SharePoint Brand Center currently does not support detailed navigation font and color controls natively without custom development. To achieve this, an SPFx (SharePoint Framework) extension allows you to inject custom CSS across an entire tenant or specific sites.

Store your custom CSS

Create your custom CSS file defining the new navigation font sizes and colors, and upload it to the root site's Style Library.

Configure the SPFx extension

Set up a custom or third-party SPFx CSS injection extension and reference the CSS file path stored in your Style Library.

Package the solution

Build and package your SPFx solution into an .sppkg file using your SharePoint development environment.

Deploy to the app catalog

Navigate to the site collection app catalog (for a specific site) or the tenant app catalog (for global deployment), upload the packaged solution, and deploy it.

Activate the extension

Enable the deployed extension on your intended SharePoint sites to successfully override the default navigation styling with your custom CSS.

Free Microsoft Office alternative

Looking for a Lightweight Alternative to Microsoft Office?

While SharePoint and Microsoft 365 often require complex development like SPFx extensions for simple customizations, WPS Office provides an intuitive, hassle-free environment for all your daily document needs. Enjoy a seamless, lightweight, and highly compatible office suite without the steep learning curve.

Fully compatible with Microsoft Word, Excel, and PowerPoint document formats.Lightweight architecture ensures lightning-fast installation and smooth performance.Intuitive, tabbed user interface makes document management effortless.Built-in PDF editing and seamless file conversion tools.

Frequently Asked Questions

Can I change SharePoint navigation fonts using the SharePoint Brand Center?

Currently, the SharePoint Brand Center alone does not provide native, granular controls for changing specific navigation font sizes and colors without relying on custom CSS development.

Why can't I edit CSS directly in Modern SharePoint like in the classic version?

Modern SharePoint restricts direct CSS editing and master page customization to ensure site responsiveness, optimize performance, and maintain compatibility with continuous Microsoft updates. SPFx extensions are the officially supported method for injecting CSS.

Where should I store the custom CSS file for my SPFx extension?

It is best practice to store your custom CSS file in the Style Library of your root site. This ensures the file is centralized and easily accessible for the SPFx extension to reference across your entire site collection.

Document & File Issues