none
Fly-Out Menu background RRS feed

  • Question

  • I have enabled the fly-out menu option on my SharePoint 2013 master page using the code below.  Can someone tell me how to set the width of the background box?  In Chrome the text is wider than the box, and in IE the box is really tall and narrow, and it wraps the text for each of my links to 8 or 10 lines.  Thanks.  

    <SharePoint:AspMenu
    id="V4QuickLaunchMenu"
    runat="server"
    EnableViewState="false"
    DataSourceId="QuickLaunchSiteMap"
    UseSimpleRendering="true"
    Orientation="Vertical"
    StaticDisplayLevels="1"
             ItemWrap="false"
    AdjustForShowStartingNode="true"
    MaximumDynamicDisplayLevels="1"
             StaticSubMenuIndent="0"
    SkipLinkText=""
    />


    Monday, April 29, 2013 5:55 PM

Answers

  • Looks like I asked too soon.  For anyone with the same problem, I fixed it by adding width in the menu-item style in the head section of the seattle.master page.

    <style>
        .menu-item
        {
            background-color:white;
            width:140px;
        }
        </style>

    • Marked as answer by MadOTC314 Monday, April 29, 2013 7:36 PM
    Monday, April 29, 2013 6:59 PM

All replies

  • Looks like I asked too soon.  For anyone with the same problem, I fixed it by adding width in the menu-item style in the head section of the seattle.master page.

    <style>
        .menu-item
        {
            background-color:white;
            width:140px;
        }
        </style>

    • Marked as answer by MadOTC314 Monday, April 29, 2013 7:36 PM
    Monday, April 29, 2013 6:59 PM
  • We've tried adding this in our head section of the seattle.master page.  Unfortunately, we still have wrapped text for menu links.  Any ideas?

    Wednesday, June 19, 2013 3:17 PM
  • Are you sure that the page you are working on is still linked to the master?
    Wednesday, June 19, 2013 3:54 PM
  • Yes, in Site Settings>Site Master Page Settings, for both Site and System Master page, Specify a master page to be used.... is chosen, with seattle selected in the drop-down.
    Wednesday, June 19, 2013 4:47 PM
  • This only works for me in Chrome browser, not doing anything in IE8

    Wednesday, June 19, 2013 5:38 PM
  • Can you show me exactly where this code would go?  Thx!
    Monday, June 9, 2014 8:43 PM
  • Me too, I have placed ItemWrap = fasle in my code and I'm not seeing single lines of text in drop down flyouts.  My site is defaulting to the seattle page which I have updated
    Thursday, July 31, 2014 2:25 PM
  • I found this site which might assist with no wrapping within the flyout menu:

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

    Specifically-

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

    That worked for me.


    Jesse A. Brandenburg

    Wednesday, January 14, 2015 2:26 PM