If your SharePoint site's sub menu is too narrow, and you want to make it wider, in a way that causes the text to stay on one line, this article is for you.
Before:
After:
It is possible to achieve this result for both Managed Metadata navigation and Structural navigation with the help of some custom CSS. Please follow the steps below.
TABLE OF CONTENTS
This article is for you if
- You use SharePoint classic experience.
- You have ShortPoint installed on your SharePoint site(s).
- You are a ShortPoint user with an active license.
Solution
Step 1. Prepare the custom CSS code
Here is the custom CSS code snippet that you will need to use. Please copy it:
ul.shortpoint-menu-replaced ul.dynamic {
overflow-wrap: normal !important;
width: auto !important;
min-width: 125px !important;
}
span.menu-item-text {
white-space: nowrap;
}
Step 2. Apply the custom CSS code in Theme Builder
Open the ShortPoint Theme Builder and click Customize my site:
Navigate to the Utilities > Custom CSS:
Paste the code you copied in the Step1 to the Custom CSS text area:
Click Apply (1) and then Publish (2) to save the customizations:
That's it. Now your sub-menu is so much more eye-appealing!
Related articles: