Start a new discussion

To start a new discussion please visit the discussions section of the GitHub home page of the project.

Discussions on GitHub

You can also search our old self-hosted forums for any useful information below but please note that posting new content here is not possible any more.

Reply To: Centering dropdown in relation to parent

Home Forums Older releases 1.0.x + Bootstrap addon Centering dropdown in relation to parent Reply To: Centering dropdown in relation to parent

#3385
admin
Keymaster

You will need some additional custom code – just include it after jQuery on your page:

// SmartMenus jQuery - Center first level sub menus to parent item
$(function() {
	$('#main-menu').bind('show.smapi', function(e, menu) {
		var $menu = $(menu);
		// check just first-level subs
		if ($menu.dataSM('level') == 2) {
			var obj = $(this).data('smartmenus'),
				$item = $menu.dataSM('parent-a'),
				itemW = obj.getWidth($item),
				menuW = obj.getWidth($menu),
				menuX = (itemW - menuW) / 2;
			// keep supporting keepInViewport
			if (obj.opts.keepInViewport) {
				var $win = $(window),
					winX = $win.scrollLeft(),
					winW = obj.getViewportWidth(),
					itemX = $item.offset().left,
					absX = itemX + menuX;
				if (absX < winX) {
					menuX += winX - absX;
				} else if (absX + menuW > winX + winW) {
					menuX += winX + winW - menuW - absX;
				}
			}
			$menu.css('margin-left', menuX);
			if ($menu.dataSM('ie-shim')) {
				$menu.dataSM('ie-shim').css('margin-left', menuX);
			}
		}
	});
});

Assuming your root UL element has id="main-menu" this should work no matter whether you are using the script with/without the Bootstrap addon.