[admin]

This shouldn’t be a problem so I guess there is something wrong on your page that causes the issue (maybe a JS error or some custom CSS that conflicts with the menu styles). If you like, please post some kind of the demo URL and I will check it.

[admin]

The SmartMenus plugin should work fine with jQuery 2.1.4:

http://jsfiddle.net/rno3Lhbf/2/

Not sure why it’s not working for you. 😕 If you like, please share some kind of demo URL I could test and I can try to figure it out.

[admin]

That’s because the Bootstrap addon depends on the default Bootstrap’s float: left/right declaration for the LI elements to detect when the menu tree is in collapsible mode. So you will need to modify the following code in “jquery.smartmenus.bootstrap.js”:

					// custom "isCollapsible" method for Bootstrap
					obj.isCollapsible = function() {
						return !/^(left|right)$/.test(this.$firstLink.parent().css('float'));
					};

like this:

					// custom "isCollapsible" method for Bootstrap
					obj.isCollapsible = function() {
						return this.$firstLink.parent().css('display') == 'block';
					};

And also make sure your CSS only affects desktop view:

@media (min-width: 768px) {
	.navbar-default .navbar-nav > li {
		float: none;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}
}

[admin]

OK, thanks for the info!

[admin]

Check the links of the parent items – if they have empty href="" attributes, the script will detect them as current items if the markCurrentItem: true option is set.

[admin]

Hi, for some reason, I am not able to reproduce this. 😕 Could you please give exact steps to reproduce here:

http://vadikom.github.io/smartmenus/src/demo/

Also please mention what device/browser you are testing with.

Thanks!

[admin]

Hmm, that’s the first time I hear about such an issue. 😕 I haven’t personally experienced it and wonder whether it might be caused by some kind driver or hardware issue on your machine (video card/mouse) because it means that when the mouse cursor is moved its reported position is only refreshed for more than 2 pixels distance. Now that I think of it, it might also be some kind of battery saver feature activated on a laptop which lowers display refresh rate or something like that.

Apart from that, increasing the delta check to 3px is not a problem I believe – it should just be kept low enough since this is a workaround for an issue I once noticed on touch screen Windows devices.

Anyway, I will try to reproduce it in some way but could you please share some details about the PC/laptop you are testing on (brand, video card, etc..)? Thanks!

[admin]

You’ve copied the source from some kind of dev tools, as far as I can see, so I can’t be 100% sure what your original source looks like but here is an issue nonetheless – the <ul> element is not properly nested here:

                <li><a href=""> Listing</a>
                </li>
                <ul>
                    <li><a href="modules.php?set=modules_products_listing"> Product Listing</a>
                    </li>
                    <li><a href="configuration.php?gID=8"> Order display</a>
                    </li>
                </ul>

Should look like this:

            <li><a href=""> Listing</a>
                <ul>
                    <li><a href="modules.php?set=modules_products_listing"> Product Listing</a>
                    </li>
                    <li><a href="configuration.php?gID=8"> Order display</a>
                    </li>
                </ul>
            </li>

Fix this (all occurrences) and let me know if you still have any troubles.

[admin]

Hi,

Could be done very easily with a bit of additional CSS.

1) Copy the following (you can tweak it later if you like) and save it in a new file “sm-pure-css.css”:

/* SmartMenus - pure CSS menus */
@media (min-width: 768px) {

	/* sub menus defaults - width should be the same for all */
	.sm ul {
		width: 12em;
		left: 0;
	}
	.sm-rtl ul {
		left: auto;
		right: 0;
	}

	/* sub menus offset */
	.sm ul ul, .sm-vertical ul {
		margin: -2.7em 0 0 11.8em;
	}
	.sm-rtl ul ul, .sm-rtl.sm-vertical ul {
		margin: -2.7em 11.8em 0 0;
	}

	/* show sub menus on hover */
	.sm li:hover > ul {
		display: block;
		z-index: 10000;
	}
}

2) Then link it on your page after “sm-core-css.css” and your chosen theme like this:

<link id="sm-pure-css" href="PATH_TO/sm-pure-css.css" rel="stylesheet" type="text/css" />

3) Finally, add the following JS line before your SmartMenus init call:

$('#sm-pure-css').remove();

E.g. should look something like:

$(function() {
	// disable SmartMenus pure CSS
	$('#sm-pure-css').remove();

	// SmartMenus init
	$('#main-menu').smartmenus({
		subMenusSubOffsetX: 1,
		subMenusSubOffsetY: -8
	});
});

Let me know if you have any troubles.

[admin]

You mean something like this?

http://jsfiddle.net/vadikom/a3ra27kq/

Replace the CSS you just added with the one from the above JSFiddle demo (just omit the last few rules after the comment /* IGNORE: Unrelated generic demo styles */) and also set the “main-nav” class to your <nav> element.

[admin]

Hi, I saw you have added the JS code but it looks like you haven’t added the CSS. Just copy it from here:

http://www.smartmenus.org/docs/#menu-toggle-button

and make sure it’s added on your page in some way. Then you can add the HTML before your root UL element and it should work.

[admin]

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. 🙂

[admin]

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.

[admin]

Not sure why it’s not working for you. Here’s a test fiddle:

https://jsfiddle.net/vadikom/0sa4wcjx/

e.g. try clicking on Sub Test -> Dummy item. In desktop view the sub menu is not hidden, while in collapsible mode (mobile) it’s hidden.

[admin]

Which theme are you using? I’d suggest customizing the colors via Codepen by editing the SASS variables – i.e. select the theme you like here:

http://vadikom.github.io/smartmenus/src/demo/

click ‘Customize “theme_name” on Codepen’ and then edit the color variables you like.

[admin]

Hi, please check the rightToLeftSubMenus option:

http://www.smartmenus.org/docs/#rightToLeftSubMenus

and potentially the data-sm-reverse attribute:

http://www.smartmenus.org/docs/#data-sm-reverse

and let me know if you still have any troubles.

Otherwise, you could override the inline styles (automatically calculated by the script based on a number of conditions) by using !important CSS declarations.

[admin]

Hmm, seems like some weird CSS bug in Webkit/Blink. It seems to be caused by the fact that your main menu is nested in a table. Anyway, you can fix it by adding another rule:

#main-menu {
	width: 100%;
}

Edit: it’s best to add this inside the same media query as the above rule for the LI’s you’ve posted.

[admin]

Hey Rover, try this, it should work:

$(function() {
	$('.main-menu-heading').click(function() {
		$('#main-menu-state').click();
	});
});

It will trigger a click on the hamburger button each time the .main-menu-heading is clicked.

[admin]

Not sure if you still need this but you would have to use the API in one way or another. Check the following events:

http://www.smartmenus.org/docs/#beforeshow
http://www.smartmenus.org/docs/#show

You could check if any sub menu is visible at any given moment, for example, like this:

var $subMenu = $('#mySubMenu'); // the id of the UL element
if ($subMenu.is(':visible')) {
	// ...
}

[admin]

Complete navbar demos are available now:

http://www.smartmenus.org/about/themes/#demos-gallery

[admin]

A similar demo is now available:

http://www.smartmenus.org/about/themes/#demos-6

[admin]

@noobiemania The problem happens when float: none; is applied for the .navbar-nav > li elements – it breaks the following method in “jquery.smartmenus.bootstrap.js”:

// custom "isCollapsible" method for Bootstrap
obj.isCollapsible = function() {
	return !/^(left|right)$/.test(this.$firstLink.parent().css('float'));
};

So if you are using something like this to center the items:

@media (min-width: 768px) {
  .navbar-nav {
    width: 100%;
    text-align: center;
  }
  .navbar-nav > li {
    float: none;
    display: inline-block;
  }
}

to avoid the issue you will need to change the method in “jquery.smartmenus.bootstrap.js” to something like this:

// custom "isCollapsible" method for Bootstrap
obj.isCollapsible = function() {
	return this.$firstLink.parent().css('display') == 'block';
};

[admin]

Hi, check this:

http://www.smartmenus.org/forums/topic/top-level-menu-item-showshides-sub-menu-on-click/#post-2901

[admin]

This should work:

http://www.smartmenus.org/forums/topic/remove-level-2-menus/#post-3200

[admin]

Not, sure what exactly you have tried to achieve but @screen-sm is the correct variable to edit in Bootstrap’s SCSS.

But it might also be due to any custom CSS you’ve added. To debug it, I’d suggest starting with Bootstrap’s default CSS only and then carefully adding any custom CSS.

[Author]

Posts