This is a quick but handy little CSS style statement to increase the width of the SharePoint 2013 top navigation bar drop down, which by default is pretty small.  Now I know ideally the navigation item text should be short and sweet, but I also know how folks love their long department names and the like in the navigation. 

What SharePoint does by default

When you have nested navigation items, the drop down menu will be dynamically assigned a fixed width that you will only see pop up in a browser inspection tool when you hover over the menu.  How the width value is calculated… honestly I have no idea because I have seen these values vary based on the length of the content within.  But it never shows a full width where longer navigation items DON’T have a text wrap, as shown below.

CSS to fix the fixed width

First you need to decide if you want a fixed width drop down (say 300 pixels or so) or if you want the width to stretch to contain whatever length of text is within.

The benefit to a fixed width is you will have consistency across your drop down menus with a uniform width and you don’t have to worry about really, really long navigation item names forcing your drop down to be huge.

The benefit to the automatic width on the other hand is you only create the space you need to take up and minimize what is covered up on the screen by the drop down.

Reset to new fixed width

/* Resize navigation fly-out width */
ul.dynamic {
  width: 300px !important;  /* !important needed to override inline SharePoint style */
}

Update the unit of measurement as needed.

Reset to auto size based on navigation item character length

/* Resize navigation fly-out width */
ul.dynamic {
  width: auto !important;  /* !important needed to override inline SharePoint style */
  white-space: nowrap;
}

The “white-space: nowrap” is what makes this method work, so don’t chop it off!

And in the end…

Here is the result:

Add in a bottom border and a little padding and it will actually start to look respectable!

ul.dynamic li {
  border-top: 1px solid #ddd;
  padding: 10px 0;
}
ul.dynamic li:first-child {
  border-top: 0
}