Increase width of SharePoint 2013 drop down navigation

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.

Demo of navigation item text wrapping in the set width drop down.

 

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:

Result after adding CSS to modify the width

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;
}

Add a little padding and border to create visual separation between the navigation items.

43 thoughts on “Increase width of SharePoint 2013 drop down navigation”

  1. I applied the settings for auto sizing; however, it is not consistent on all navigation items. When hovering over some, it auto sizes to the content, and in other cases it does not and the text extends over the container. Please explain.

    1. I can’t duplicate this issue. My first thought is that you have some other CSS that is being applied that is restricting the width of the drop down for that given menu. Is this on the first level menu or on a second or third level fly out? Is it consistently the same menu that has the text overflow issue or does it change from page to page? If a block of CSS is not working, it is typically because there is other CSS that is more specific and is overriding the CSS that is seemingly not working.

  2. I tried applying these edits to the CSS code and it doesn’t seem to have done anything. I am using the oslo master and have it pointing to/using a custom CSS file. Any ideas?

    1. How are you pointing to a custom CSS file? Via the master page or the Alt CSS setting in the Master Page settings? Are there any other CSS style changes in the CSS file that are being successfully applied to your site? I would first make sure that the CSS file is loading because that is often the culprit. All CSS files should be published as well.

      1. So being new to CSS – where would I out this so it is applied to all sites in my farm? From what I am reading, it appears to have to go on the master page, I am guessing I can use SharePoint Designer to handle this? Thanks for any help!!

        Jeremy

        1. You can create a CSS file and store it either on the web server in the SharePoint directory, or in the content database for the site, such as the Style Library. Then through the master page or through the Alternate CSS URL setting (publishing sites) you can link to the CSS file. The creation of the CSS file and the linking from the master page can all be done in SharePoint Designer, or manually through other editors such as Notepad.

    1. I am not sure what you mean by credit where credit is due… as a fellow blogger I am sure you can relate to the near impossibleness of researching every possible topic to make sure that no one else has posted anything about it. And that flies in the face of information sharing anyways. Our posts are formatted differently and I did not copy your approach or use it as a baseline as I was not even aware that your post existed. Thank for the link for the additional post.

  3. Hi,

    Can you show me how you made a third level of navigation? Your “Where to learn more about our aswesome company and employees” has a triangle that I assume has another level of a drop down menu. I tried doing this by changing MaximumDynamicDisplayLevels to 3, but that didn’t give me the option to put a header under a header in site settings> navigation.

    1. Altering the MaximumDynamicDisplayLevels in the navigation code does not affect the navigation settings through the UI. You have to have content to show the content so make sure you have content three levels deep either via structured nav or managed navigation. Unfortunately you can’t nest headings. 🙁

      1. So I add content under site setting > Navigation, correct? I am using Structural Navigation. Is under Structural Navigation: Sorting section where I have the content? Because I have the Global Navigation and then 6 Headings Under that and then links under the Headings. If headings cannot be nested how is it possible to make multiple levels? Are you saying that a “link” can have the third dropdown level? If so, how would you do this? How do I add content three levels deep if I am not allowed to move left and right, only up and down. I wish i could add a screenshot to show you. I appreciate your help!

        1. Send me a message at: http://sharepointexperience.com/connect/send-message/

          From there we can carry on a dialog easier and you can send screenshots. The SharePoint navigation is more geared for SharePoint sub sites and pages and not as flexible for just links and headers. For example:

          Header (level 1)
          – Link (level 2)

          Site (level 1)
          – Sub site (level 2)
          * Page (level 3)

  4. Thank you, this worked great! I chose not to upload the .css to the Style Library, because the reference in the master page ended up mangled by SP2013’s double encoding bug on render. I added it to the root level SiteAssets folder instead.

  5. Is there no way to do this OTHER than with .css? I am trying desperately not to have to learn or use .css on my SharePoint site. I just want the popout/pulldown menus to size reasonably. I really don’t want to have to create a .css and point my master page to it, because (a) I’ve never done that, and (b) I’m concerned I’ll now have something to maintain that I don’t really understand.

    1. Any time you want to alter the SharePoint UI in ways that are not provided through Site Settings, you will have to do some sort of coding. CSS is one of the easier and more lightweight ways to do this. If you don’t want to use CSS, the only thing I can suggest would be to use JavaScript or jQuery (which depending on the solution may still have you writing CSS as a part of the code).

      You can point your site to a CSS file through the Alt CSS URL setting under the Master Page Site Settings (Site Actions -> Site Settings -> Master page [under Look and Feel column]). This way you don’t have to modify your master page file to point to a CSS file.

  6. Hello Heather,
    This solution looks fantastic! Did you modify the Corev4.css file? If you did where in the Corev4.css file did you make your modifications and add code.
    If you did not modify the Corev4.css file which css file did you modify?

    1. Thanks Sean! I never modify Corev4.css since it is so large and convoluted. I always create a new CSS file and store any changes and overrides there. I wrote up a post that covers basic instructions for doing so here: http://blog.sharepointexperience.com/2015/10/implement-custom-css-in-sharepoint/

      If you want to edit your master page or are in a non-publishing site, I will be posting next week about how to add a custom CSS file to your master page. Essentially you need to link to the CSS file from the HEAD of the master page using this tag: link rel=”stylesheet” type=”text/css” href=”YOUR-CSS-FILE.css” /

      Just add greater than and less than characters on either side (I can’t post straight code here in a comment block).

  7. I had similar issues to others where the text would spill outside of the container. If I use min-width instead of width, it works properly.

  8. First GREAT POST! Thank you very much. I have been struggling with making the dropdown the full width of the screen just using CSS. I can set the width to 100% but it just shrinks everything to one column. I can put in a px amount which will make it big but I have yet to figure out how to stretch it dynamically to fill the full width of the screen. ANY help would be appreciated. 🙂

    1. Are you wanting this in order to create a mega menu of sorts? Or are you just dealing with really long navigation item names?

      1. I just want to have the drop down menu to take up the whole width of the screen. Then center the table with the menu items to 1000 px. So I guess you would call it a mega menu of sorts. 🙂

        1. Given how SharePoint code it written, I don’t think this is possible with CSS alone. I think you would have to move to JavaScript/jQuery to accomplish this design. With that said, I would encourage you to do some end user testing before going through that effort to make sure that a large, content covering drop down like that wouldn’t frustrate your users.

          1. Thank you for you reply. The business dictated the large drop down. I will look into JQuery to accomplish this. Do you have a good jumping off point for me? I am not all that fluent with JQuery.

          2. I don’t have a starting point suggestion for jQuery for this application. The problem is in SharePoint the drop down menus are generated and placed way off the screen using absolute positioning. When you hover a script fires to move the menu back into view and it adds inline styles to position it in the right place. So you need to change that second location, and make sure all drop down menus start at the same point and not relevant to the parent navigation item. Then you need to work the width and padding to get to that 1000px you mentioned and not lose the drop down when you move the mouse from the navigation item and across the “spacing” until you get to the 1000px menu items. There is also the full width issue. You would have to read the size of the browser and make sure your drop down spans the width since setting a 100% width won’t (likely) do you any good. You can’t change the HTML that SharePoint generates and the drop downs will be nested unordered lists (or tables if you opt to alter the master page and go that route) so 100% width won’t go full page. I am just spitballing thoughts here on what you are facing. Also, you have to decide now if you are using structured or managed navigation because the HTML that SharePoint generates for each menu type is different. So there is a decent chance the code you write won’t work with the other navigation style. This is one of those times where SharePoint complicates things to a point where it may not be worth the added effort and code. Plus if you need a mobile view, you will need to undo everything you add to the menu for the responsive design.

          3. Wow… Well with my current skills that is not going to happen. Is there a way that I can have the number of columns be dynamic based on how many items are currently in the drop down navigation? My navigation is Structural navigation. I have some parents that only have a handful of child links. (btw thanks, you just saved me a lot of headache with that explanation.) Reset expectations. 🙂

  9. What does it take to add the option to have one more fly out? I have a flyout not working and I assume it is because I have one to many levels?

    1. It requires a change to the master page code. Open the master page file and search for “TopNavigationMenu”. That should land you at the SharePoint AspMenu control for the top navigation. If you need the current navigation (quick launch) search for “V4QuickLaunchMenu”.

      Within that control is a property for MaximumDynamicDisplayLevels. Increase the listed number by one to add another fly out menu level to your site.

  10. Hey Heather,
    thanks for this! Do you have any idea why my custom.css is correctly applying the width to my flyouts, but ONLY when accessing the navigation from my Site Settings page? Trying to use the flyouts anywhere else, eg. Home.aspx, my flyouts get very compressed. When I check in Dev tools, my custom.css is not even being called from these other pages, but it is from my Site Settings page (settings.aspx).

    1. The first thing I would suggest checking is what master pages have been set as the Site vs. the System master page in the settings. Any pages stored in the Pages library (such as home.aspx) have the “Site” master page applied while all non-publishing pages such as Settings.aspx have the “System” master page applied. If you are calling your CSS file via a custom master page and it is only set as the System master page, that would cause what you are seeing.

  11. Hi Heather! Your article was very informative and well written, however since I am extremely new to sharepoint, I have a few questions. First, how do I access the CSS Master Page? I’ve found the page templates we are using, it seems to be “boston”. Second, Do i just apply the code in the head to make it work? Thanks!

    1. The CSS file is separate from your master page file. The code needs to go into a CSS file (preferred) or in a STYLE tag in the head of your master page file. The Boston reference that you made is not an out of the box file and must be a third party file or added by a consultant, etc. Due to that, I can’t tell you exactly where you need to go make your file edits.

Leave a Reply

Your email address will not be published. Required fields are marked *