Your site's Sub Menu might be too narrow, and you want to make it wider, in a way that causes the text to stay on one line. This article explains how you can achieve this on both Managed Metadata navigation and Structural navigation.



Before we start

Let's first look at what we have and what we want.


Here is how the Sub Menu looks now:


And here is how it will look at the end of this article:



Solution

All that is required to get the desired look is to simply add some CSS into the custom CSS section in your ShortPoint Theme Builder. If you don't know how to locate ShortPoint Theme Builder, please use this article to see how.


Step 1.

Copy the CSS code snippet below:


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.

Paste the code you just copied in the custom CSS section in ShortPoint Theme Builder. 



Step 3.

Afterwards click publish and your site's Sub Menu should be wider and visible to all your site's users.



You can let us know if this article helped you by giving it a thumbs up.


Related articles:

How to Create Header Sub-Menus with Drop-Down Lists

How to Design a Beautiful Header (Inspired by ShortPoint Demos Website)

How to align your site's Menu and Searchbar vertically