Known Issue: Hub Menu Items and Labels Are of Wrong Size and Color

If you have a Hub Site, you might have noticed the following issue: some hub menu items (and labels) are not picking the color and size of the font that was set in the Theme Builder. 

In this article, we will help you fix this issue.

Problem

When you are trying to change the font, font color, and text size in the Theme Builder, Fonts & Typography > Menus > Hub Menu, the changes are not being applied to the labels and sub-items. 

Here is how this looks like in the case of a label (notice the difference in size with other menu items on the left and right):

Reason

There is an issue in ShortPoint Theme Builder affecting the hub menu labels and sub-items that is currently being fixed.

Solution

Go to ShortPoint Dashboard > Theme Builder > Utilities > Custom CSS. 

Put in the following code if your problem is with the sub-menu item (an item in a drop-down):

.ms-HubNav .ms-HorizontalNavItem-link {
    font-size: 18px !important;
    color: #03787C !important;
}

In case you want to target the label of a hub menu:

.ms-HubNav .ms-HorizontalNav-chevronDown {
 font-size: 18px !important;
 color: #03787C !important;
}

If you want to target both, please use these two code blocks together:

.ms-HubNav .ms-HorizontalNavItem-link {
    font-size: 18px !important;
    color: #03787C !important;
}
.ms-HubNav .ms-HorizontalNav-chevronDown {
 font-size: 18px !important;
 color: #03787C !important;
}

Related articles:

• Known Issue: SharePoint Hub Navigation Displays Vertically
• Known Limitation: Hub Menu Items Are Cut Off When Adding Horizontal Spacing