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.

Centering dropdown in relation to parent

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #3382

    My dropdown menus can have variable width depending on the length of their contents. I would like them to be centered in the parent item, sticking out at either side if the drop down is wider than the parent.

    I believe I would have to set


    but as the width of the dropdown is variable how or where would I do so.


    I was wrong about the offset used, it’s mainMenuSubOffsetX that does the correct thing.

    I managed to come up with a solution that seems to work. The following code I added after the ‘hide.smapi’ binding in the jquery.smartmenus.bootstrap.js file.

    'beforeshow.smapi': function (e, menu) {
    	var $menu = $(menu), obj = $(this).data('smartmenus');
    	obj.opts.mainMenuSubOffsetX = 0;    // reset so it isn't held over between different dropdowns
    	var width = obj.getWidth($menu.dataSM('parent-a'));
    	var subWidth = obj.getWidth($menu);
    	if (subWidth > width) {
    		obj.opts.mainMenuSubOffsetX = -Math.abs((subWidth - width) / 2) + 'px';

    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.


    OK, you beat me to it. 🙂 What I posted is a bit more generic approach but glad to see you’ve figured out your own solution too. 🙂


    Thanks for posting your code. My solution doesn’t take into account any options we don’t have set so I’m sure yours will be very useful in the future.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘1.0.x + Bootstrap addon’ is closed to new topics and replies.