Try ShortPoint nowIf you currently have a SharePoint Hub Navigation applied to your pages, and you see that it is displaying vertically, then please read this article to help you with resolving this issue.
Here is a sample of the issue:
TABLE OF CONTENTS
Reason
We are currently doing a thorough investigation about the issue which involves ShortPoint Theme Builder, and we will be updating you once we have found the root cause.
Rest assured that it will be fixed in the product soon.
Solution
This issue can be fixed by applying a workaround using Custom CSS. Please follow the step-by-step instructions below.
Step 1: Open Custom CSS option in ShortPoint Theme Builder
Open Theme Builder (Site Contents> ShortPoint Dashboard> Theme Builder> Customize My Site)
Navigate to Utilities > Custom CSS.
Step 2: Add the Custom CSS
Copy the following Custom CSS code and paste it in the text box:
/* position hub menu horizontally */
.ms-HubNav .ms-HorizontalNavItems-list {
display: flex !important;
align-items: center;
}
In case your Hub menu items do not appear with the font customization applied to them from the Theme Builder, you may also add this Custom CSS solution below and replace the value as indicated:
/* IN CASE MENU ITEMS FONT FAMILY/WEIGHT IS NOT PRESERVED */
html.shortpoint-branding-active .sp-dummy .ms-HubNav [class*="ms-HorizontalNav"] [class*="ms-HorizontalNavItems"] [class*="ms-HorizontalNavItem"] [class*="ms-HorizontalNavItem-link"],.ms-HubNav [class*="ms-HorizontalNav"] [class*="ms-HorizontalNavItems"] [class*="ms-HorizontalNavItem"] [class*="ms-HorizontalNavItem-link"],html.shortpoint-branding-active .sp-dummy .ms-HubNav [class*="ms-HubNav-link"],.ms-HubNav .ms-HubNav-nameLink span,.ms-HubNav [class*="ms-HubNav-link"] {
font-family: Arial !important; /* REPLACE THE FONT-FAMILY VALUE */
font-weight: 400 !important; /* REPLACE THE FONT-WEIGHT VALUE */
}
Where:
Arial should be replaced with the font of your choice.
400 should be replaced by your preferred font weight.
Step 3: Save the changes
To save the changes, click the (1) Apply button and (2) Publish it.
Result
That's it! Your SharePoint Hub navigation should now display horizontally.
Related articles:
