SharePoint 2013 Top Navigation increasing the size width of the menu drop box to fit text using JQuery

Question

I have made the borders visible for the top navigation menu items. When the size of the text is not long the text appears to be fitting the menu drop box, However when the size increase of the text, it goes outside the box as shown below in the image. Requirement is not to break words.

Requirement is not to break words.

Edit 1

Below is the screenshot result tried out from Mihail's Answer.

The border of the box still does not stretch to the text size. Seems like with just plane css is it difficult to accomplish it. I believe may be css with jquery might be one option.

Answer 1

To fix the problem with the text getting out of the box, use the following solution:

ul.dynamic {  
  width: auto !important;
  white-space: nowrap;
}

Source: http://blog.sharepointexperience.com/2014/10/increase-width-sharepoint-drop-down-navigation/

Answer 2

You need the following piece of CSS to ensure that the menu items on the global navigation menus do not break into multiple lines and that the width of the drop-down menu extends to fit the length of the menu items' text:

/* Disable menu text wrapping. */
#DeltaTopNavigation ul.dynamic {
  white-space: nowrap;
  word-wrap: normal;
  width: auto !important;
}

You can easily apply this CSS to an entire site collection by saving it as a .css file (e.g. "menu.css") and uploading it to SharePoint following this steps:

1. Navigate to the root site of a site collection.
2. Navigate to Site Contents of the site.
3. Navigate to the Style Library library.
4. Upload your menu.css file to the library and publish it.
5. Navigate to the Site Settings.
6. Click Master Page under Look and Feel section on the right column.
7. Click to expand the Alternate CSS URL section.
8. Select the "Specify a CSS file to be used by this site and all sites that inherit from it:" option.
9. Click the Browse... button and select the "menu.css" file from the Style Library.
10. Check the "Reset all subsites to inherit this alternate CSS URL" check box. Do this ONLY if the subsites in the site collection inherit the global navigation from the root site in the site collection.
11. Click OK.

Of course, you can apply the CSS fie only to specific sites, not to all sites in the site collection. Follow the same steps but ignore step 1 and 10.

---

If you want to also reduce the distance between menu items and the arrow on the right-had side, add the following CSS to your menu.css file:

/* Minimise space between menu item and arrow for sub menu items. */
.ms-core-listMenu-horizontalBox .dynamic-children.additional-background {
  padding-right: 12px;
}

You can of course change 12px to another value to suit your needs.

---

What I showed you above is the supported and recommended way by MicroSoft. You can obviously use jQuery or vanilla JS to manipulate the style property of the DOM elements which you can identify using the same HTML ids and classes I used above if your solution requires it.

Answer 3

Make the menu items stretch:

span.menu-item-text {
  display: inline-block;
  white-space: nowrap;
}

Make the container resize to fit:

ul.dynamic {
  width: auto!important;
}