Prevent line break in top level navigation drop-down menu

Question

I customized my top level navigation menu to display our different team sites in a drop-down menu.

It's great, except for the fact that the drop-down menu looks twice as long because every time site that has a long name (ex: "Professional Services", "Product Management") is displayed over two lines, and makes my drop-down menu look endless.

How do I fix that? - I can't change the names.

Answer 1

You can make the top navigation to fit the text by adding some CSS code. The following code will change the ul-List of the top navigation in a way that no text is wrapped.

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

I assume you want to modify the top navigation within your whole site / site collection. So you should add the code to your masterpage.

Caution: This code disables the wrapping within the navigation in general. So in case you have some very long text within your navigation it might look "ugly".

Answer 2

Good suggestions @jcp.

Option #2: You can set the min-width property of the ul container if you don't wan't to mess with white space wrapping. This was the dropdown nav looks consistent in width.

Ex.

div.ms-core-listMenu-horizontalBox ul.dynamic {
   min-width: 250px;
}