How can we help you today?

Known Issue: SharePoint Hub Navigation Displays Vertically

If 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:

Issue sample



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.


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.

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;

Paste the custom CSS 

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:

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 */



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. 

save the code and publish.


That's it! Your SharePoint Hub navigation should now display horizontally.

Fixed result

Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 17 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more