Modifying Hub navigation\Mega Menu Font Size

Copper Contributor

Hi, 

 

We have a hub site as a main intranet with several associated sites. The ask from customers is to make the hub navigation bold or larger font. 

 

Is there a way to modify font size for hub navigation? Anyway using Application Customizers?

We do not want to create our own control as it should be manged through the out-of-the box navigation settings. 

Any quick modification that we can do?

2 Replies

@Isha Kapoor 

I am facing exactly the same issue, and same I do not want to customize anything, I prefer to use as much standard feature in SharePoint as possible. Screenshot of my Megamenu

@Isha Kapoor You can inject custom CSS using SPFx application customizer to make hub navigation bold like: 

 

a.ms-HorizontalNavItem-link {
    font-weight: bold !important;
}

 

Output

ganeshsanap_0-1666773262188.png

Check my answer for more information at: How can I include JS and CSS files on SharePoint Modern Page? 

Note: DOM manipulation & CSS customizations are not recommended by Microsoft and some of your customization may break if Microsoft changes HTML element id/classes in new release updates.


Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.