[admin]

Nope, it should work fine with any level – e.g.:

https://gjs.co/equipment/new/c133/Dryers/

[admin]

Hi,

The first one is actually a bug. I will make sure it’s fixed in the future. If you would like to avoid it right now (though it won’t affect anything on your page if you leave it), open “sm-core-css.css”, find the following:

font:0/0 serif;

and replace it with the following:

font:0px/0 serif;

The second one is caused by the use of CSS gradients in “sm-blue.css” which are still a W3C working draft. There is no way to avoid these errors, unless you remove all declarations that use the gradients. But again, you shouldn’t really worry about these errors too – they won’t affect anything on your page in any way.

Cheers!

[admin]

Yep, at the moment by default the script will automatically work for all navbars on the page. But I like your suggestion and I will consider adding the possibility to easily skip any navbar – e.g. could be something like this in the JS:

 $('ul.navbar-nav:not([data-smartmenus-skip])').each(function() {  ...

and this in the HTML:

<ul class="nav navbar-nav" data-smartmenus-skip="true">...

So that modifying the default “jquery.smartmenus.bootstrap.js” wouldn’t be required like now.

Cheers!

[admin]

Not sure why you are having troubles – maybe you have not configured the path to the Font Awasome CSS file. I just tried including it like this on the page:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

And then adding icons like this:

<li><a href="#"><i class="fa fa-camera-retro"></i> Link</a></li>

works without any problems.

How can I easily hide some menu items on mobile devices, an equivalent of class=”navbar-brand hidden-xs”

You can use the same class:

<li class="hidden-xs"><a href="#">Link</a></li>

[admin]

It’s possible on theory to create a JavaScript solution that would detect the items’ width and adjust the breakpoint as needed but there isn’t a trivial pure CSS solution. But I wouldn’t really worry about this that much – it’s not a major issue that affects usability or accessibility in any way, it’s just a visual glitch.

[admin]

It shouldn’t affect performance or memory in a bad way. You may just possibly notice some weird buggy behavior of the sub menus or incorrect parent item highlighting, etc. But I will need to test a live demo in order to figure out if any major issues might happen with your exact code.

[admin]

No problem at all! To make the toggle button work on hover too, you can use some additional JS like this:

$(function() {
	var menuHideTimer = 0,
		$menuBtn = $('#menu-button'),
		$menu = $('#main-menu');
	function hideDelayed() {
		clearHideTimer();
		if ($menu.is(':visible')) {
			menuHideTimer = setTimeout(function() {
				$menu.smartmenus('menuHideAll');
				$menuBtn.click();
			}, 500);
		}
	}
	function clearHideTimer() {
		if (menuHideTimer) {
			clearTimeout(menuHideTimer);
			menuHideTimer = 0;
		}
	}
	$menuBtn.bind({
		'mouseenter': function() {
			clearHideTimer();
			if (!$menu.is(':visible')) {
				$menuBtn.click();
			}
		},
		'mouseleave': hideDelayed
	});
	$menu.bind({
		'mouseenter': clearHideTimer,
		'mouseleave': hideDelayed
	});
});

Cheers!

[admin]

Hi,

Please check the following topic – there is a short sample code that will allow you to achieve what you would like:

http://www.smartmenus.org/forums/topic/get-vertical-menu-to-work-like-mobile-but-on-hover/

In addition you may try setting the hideTimeout option to some big value to prevent reseting the sub menus on hover out – e.g.:

hideTimeout: 86400000 // one day

Let me know if you have any troubles.

[admin]

Hi,

Normally, this shouldn’t happen. When you set subIndicators: false in “jquery.smartmenus.bootstrap.js”, the SmartMenus plugin will not generate any caret elements. So you either have 2 carets in source or maybe one of them is displayed via CSS generated content (i.e. some :before or :after rule) or some additional JS code that you use.

If you like, please post a link to some sort of live example and I will check it.

[admin]

Np, glad I could help! 🙂

[admin]

In the following file:

http://dev.colincowie.com/assets/bootstrap/css/bootstrap.css

starting at line 4297 you have the following rule:

.nav > li:hover ul {
  display: block;
}

This rule is not part of the original Bootstrap CSS (even for v3.0.0 that you seem to be using) and I am not sure why it’s there for you, but basically you will need to remove it and it should all work fine.

Cheers!

[admin]

That solution probably works for older Bootstrap versions but the complete solution (without any glitches) for v3.3.1 is to edit all those media queries I have posted above.

[admin]

Hi, please post a link to some sort of live demo. You seem to be using some customized Bootstrap theme that is not well optimized. I am not sure which exact rules you will need to edit without checking your code.

Thanks!

[admin]

You are including 2 versions of jQuery on your page and this probably creates a conflict. This:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

includes jQuery 1.3.2 and this:

<script type="text/javascript" src="js/smartmenus/libs/jquery-loader.js"></script>

includes 1.10.2.

Since I am not sure if your Lightbox plugin works with jQuery versions newer than 1.3.2, I would suggest doing the following:

1) Remove the SmartMenus jQuery code you currently use:

<!-- jQuery -->
<script type="text/javascript" src="js/smartmenus/libs/jquery-loader.js"></script>

<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="js/smartmenus/jquery.smartmenus.js"></script>

<!-- SmartMenus jQuery init -->
<script type="text/javascript">
	$(function() {
		$('#main-menu').smartmenus({
			subMenusSubOffsetX: 1,
			subMenusSubOffsetY: -8
		});
	});
</script>

2) Configure your Lightbox so that it works as you wish.

3) Add the SmartMenus code like this:

<!-- jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>

<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="js/smartmenus/jquery.smartmenus.js"></script>

<!-- SmartMenus jQuery init -->
<script type="text/javascript">
	jQuery(function() {
		jQuery('#main-menu').smartmenus({
			subMenusSubOffsetX: 1,
			subMenusSubOffsetY: -8
		});
	});
</script>

Let me know if you still have any troubles after that.

[admin]

Hi,

Sorry for the delay of this answer, I can see you have figured out and tweaked the rule in “jquery.smartmenus.bootstrap.css” that controls this:

.navbar-nav .sub-arrow, .navbar-nav .collapsible .sub-arrow {
	position:static;
	margin-top:0;
	margin-right:0;
	margin-left:6px;
	display:inline-block;
	width:0;
	height:0;
	overflow:hidden;
	vertical-align:middle;
	border-top:4px solid;
	border-right:4px dashed transparent;
	border-bottom:4px dashed transparent;
	border-left:4px dashed transparent;
}

By default the space is equal to that of the regular Bootstrap carets.

Cheers!

[admin]

It’s tested and works with v3.3.1. You are probably doing something wrong. Make sure you are editing the exact same media queries as in the example code above.

[admin]

Hi,

If 2) bugs you too much, to avoid the items wrapping you will need to increase the default 768px Bootstrap breakpoint at which the navbar becomes collapsible. You can do it:

1) Either by downloading a customized Bootstrap version from here:

http://getbootstrap.com/customize/

you need to edit the media query here:

http://getbootstrap.com/customize/#media-queries-breakpoints

* Note that this solution will affect all Bootstrap components on your page, not just your navbar.

2) Or by manually editing “bootstrap.css”. Here is an example how to increase it to 991px:

http://www.smartmenus.org/forums/topic/adjusting-the-navbar-breakpoint-bootstrap-3

This solution will only affect your navbar.

Cheers!

[admin]

To be honest, I don’t remember to have tested the Bootstrap add-on on RTL pages, so please let me know if you notice any issues. I have added a note to do this in the future and probably create a demo page too.

Thanks!

[admin]

You can Google “clearing floats” or similar, there are tons of articles available. 🙂

[admin]

Please post an URL to some kind of live demo and I will check it. It’s probably caused by some of your non-SmartMenus page styles.

Thanks!

[admin]

Nope, there is no demo at the moment but the menu items are regular links so it should be similar to many other available demos. I’ve added a note to create such demo in the future (I have no idea right now when I will have the chance to do it) but for now, if you like, please post some URL to your demo and I can check why it might be broken in FF.

Thanks!

[admin]

Hi, in the following file:

http://www.collinswebb.plus.com/therapy/style.css

find the following rule:

.jcw-layout-wrapper {
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0;
	position: relative;
	z-index: auto ! important;
}

and modify it like this:

.jcw-layout-wrapper {
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0;
	position: relative;
	z-index: auto ! important;
	clear: both;
}

This should fix the issue.

Cheers!

[admin]

Of course, I didn’t mean that 🙂 but, you know, I have a family to look after so at least for now, the project doesn’t have top priority for me. Though, hopefully, that might change soon (as it has been the case in the past with the previous generation of the code long before jQuery even existed).

[admin]

Hi,

If you are using the Bootstrap add-on (which I guess is the case), you will need to modify the “jquery.smartmenus.bootstrap.js” file. Just find the following:

// click the parent item to toggle the sub menus (and reset deeper levels and other branches on click)
'click.smapi': function(e, item) {
	var obj = $(this).data('smartmenus');
	if (obj.isCollapsible()) {
		var $item = $(item),
			$sub = $item.parent().dataSM('sub');
		if ($sub && $sub.dataSM('shown-before') && $sub.is(':visible')) {
			obj.itemActivate($item);
			obj.menuHide($sub);
			return false;
		}
	}
}

and replace it with the following:

// click the parent item to toggle the sub menus
'click.smapi': function(e, item) {
	var obj = $(this).data('smartmenus');
	if (obj.isCollapsible()) {
		window._lastClickedItem = item;
		var $sub = $(item).parent().dataSM('sub');
		if ($sub && $sub.dataSM('shown-before') && $sub.is(':visible')) {
			obj.menuHide($sub);
			return false;
		}
	}
},
'beforehide.smapi': function(e, menu) {
	if (window._lastClickedItem && window._lastClickedItem != $(menu).dataSM('parent-a')[0]) {
		return false;
	}
}

This will make sure sub menus are only toggled when their parent item is clicked (i.e. the menu will not function like an accordion any more).

Please let me know if you still have any questions.

Cheers!

[admin]

Hi, there is no option for this, so if you would like to achieve it, you will need to modify the script “jquery.smartmenus.js”. You will need to find the following line:

if (horizontalParent && (absY + subH > winY + winH + 0.49 || absY < winY) || !horizontalParent && subH > winH + 0.49) {

and replace it with something like this:

if (false) {

Cheers!

[Author]

Posts