I am using the standard OOB top global navigation in Sharepoint 2013.

All menu items in the top global nav drop down. The subsites within the menus, however, flyout horizontally to the right.

Problem: The right-most menu's flyouts (of subsites within the right-most dropdown menu) are being cut off by the browser window. This is because they drop down and then fly out to the right at the edge of the viewport.

Question: Where or how could I have the last menu have their horizontal flyouts fly out to the left? Or at least know where in SPD I can find the javascript/css that is making this happen?

[Note: I'm guessing it has something to do with this particular class: "ms-navedit-flyoutArrow"]

Thank you! -S


Here is the solution I came up with to answer my own question. Your own site's modifications in terms of pixels may be different. "GlobalNavigation.css" is an external stylesheet that is being applied specifically for the global nav.

If anything, hopefully this code will help identify the dynamic inline stylings that are being applied by Sharepoint when you hover over items. It is critical that you place an !important into the insertRule or addRule css rules in order to override Sharepoint's stylings Note: ".lastMenuGnav" is an identifying class that is being placed on the very last menu item. This is in case your subsites have different global navigation items:

$( window ).load(function() { /* Identifies the last menu on the global nav / $( ".ms-core-listMenu-horizontalBox .ms-core-listMenu-root > li.static").last().addClass( "lastMenuGnav" ); / Calculates how many pixels to shift left */ var widthLastTop = parseInt($( ".lastMenuGnav" ).css("width"), 10); var widthLastDropdown = $( ".lastMenuGnav > ul.dynamic" ).first().width(); var adjustedPos = Math.abs((Math.abs(widthLastDropdown - widthLastTop)) - 22) * (-1); console.log(widthLastTop + " " + widthLastDropdown + " " + adjustedPos); /* Sets up variables to modify GlobalNavigation.css using .insertRule and .addRule (IE pre-9) */ var gnavSheet = $('link[href="http://yoursitehere/Style Library/GlobalNavigation.css"]')[0].sheet; var lastNavFix = ".ms-core-listMenu-horizontalBox li.static.dynamic-children.lastMenuGnav.hover > ul.dynamic, .ms-core-listMenu-horizontalBox li.static.dynamic-children.lastMenuGnav.hover-off > ul.dynamic { top: 29px !important; left:" + " " + adjustedPos + "px !important; }"; var fixForAddRule = "top: 29px !important; left:" + " " + adjustedPos + "px !important"; if ( widthLastDropdown > widthLastTop ) { if( gnavSheet.addRule ){ gnavSheet.addRule(".ms-core-listMenu-horizontalBox li.static.dynamic-children.lastMenuGnav.hover > ul.dynamic, .ms-core-listMenu-horizontalBox li.static.dynamic-children.lastMenuGnav.hover-off > ul.dynamic", fixForAddRule); } else if( gnavSheet.insertRule ){ gnavSheet.insertRule(lastNavFix, gnavSheet.cssRules.length); } } if( gnavSheet.addRule ) { gnavSheet.addRule(".lastMenuGnav ul.dynamic li.dynamic-children.hover > ul.dynamic, .lastMenuGnav ul.dynamic li.dynamic-children.hover-off > ul.dynamic", "left: -200px !important"); } else if ( gnavSheet.insertRule ){ gnavSheet.insertRule(".lastMenuGnav ul.dynamic li.dynamic-children.hover > ul.dynamic, .lastMenuGnav ul.dynamic li.dynamic-children.hover-off > ul.dynamic { left: -200px !important; }", gnavSheet.cssRules.length); } });


| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.