Convert SharePoint 2013 Global Navigation Drop-down to Show Multiple Columns

This is a quick and simple trick to turn a long SharePoint global/top navigation drop down (a.k.a. fly-out) menu into an easier to read, two or more column display. All you need is a little CSS.

The Challenge

You are using SharePoint’s global/top navigation (managed or structured) and a drop down menu has grown so long it resembles a holiday meal grocery list for 30 people.

The Solution

Add this blob of CSS to your custom CSS file, making width adjustments as necessary to alter the size of the drop down box and to create a two, three, four or more column design. The comments explain what each declaration does and are not required in final code.

ul.dynamic {
  width: 300px !important;  /* !important needed to override generated inline style - update overall width here */
  box-shadow: 0 0;  /* OPTIONAL: Removes default shadow on drop down menu */
}

li.dynamic {
  line-height: 1.5em;  /* OPTIONAL: Adds some leading (space between navigation items) */
  float: left;  /* Magic to make this technique work */
  width: 50%;  /* Use 50% for 2 columns, 33.333% for 3 columns, 25% for 4 columns, etc. */
  padding: 1%;  /* OPTIONAL: Pads out the navigation items */
  box-sizing: border-box;  /* Prevents the width vs. padding math game and alters default box model rendering */
}

The result:

Drop down navigation display after applying CSS.

Note: If you have modified the current/left/quick launch navigation to include drop down menus, then you will need to expand the selectors above to include a parent class, such as .ms-core-listMenu-horizontalBox.

Wha, wait! This almost looks like a mega menu

Want more?  This year at SPTechCon Austin I did a demo for a CSS only solution to convert the global/top nav drop down into what I have coined as “mega-menu-ish”. This was done in my conference session, “92% of Branding SharePoint is CSS, So Why Are You Living in a Master Page?” and here is a session recap complete with code.

The (Possible) Drawback

This technique won’t always play well with another “drill down” level of navigation. It really depends on the design.  With most layouts there is no usability-friendly way to show another fly-out from a columnized drop down menu without the use of JavaScript. But for some designs you can make it work.  The conference session recap mentioned above includes one such example.

How to Use this CSS

If you need a hand getting started with custom CSS for SharePoint, please check out these posts: