[admin]

1) You could use something like this:

@media (min-width: 768px) {
	#main-menu {
		width: 300px;
	}
}

2) You could use something like this:

@media (min-width: 768px) {
	#main-menu > li > a {
		padding-right: 0;
	}
}

[admin]

Currently the Bootstrap addon supports just navbars since by default they have very similar HTML markup to what SmartMenus needs – a regular unordered list. And SmartMenus’ main use case is as a global website menu which in Bootstrap corresponds to a navbar.

There are a few other cases where Bootstrap supports dropdowns but they use pretty different markup – i.e. they have a separate target element that triggers the dropdowns, etc. Possibly, in the future, the addon might be enhanced to support those cases too (via popup menus http://www.smartmenus.org/docs/#isPopup) but it’s not as straight forward as just supporting navbars.

[admin]

Just use the noMouseOver: true option when initializing the script:

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

[admin]

You need to include the following CSS rule in some way on your page:

#main-menu {
	z-index:8000;
}

You could add it to an external CSS file and link it on your page or even include it directly in your page source like this:

<style type="text/css">
#main-menu {
	z-index:8000;
}
</style>

[admin]

I will need a live demo to investigate it in details but I guess it may not be very simple to avoid the issue. I guess your ng-if removes the menu from the DOM when there are some activated sub menus and when the SmartMenus script tries to reset them, similar errors might be produces since the elements are no longer in the DOM.

Isn’t it an option for you to show/hide the menu tree with an ng-show/ng-hide instead? I guess it would work fine if you use any of them instead of ng-if.

[admin]

When the Bootstrap add-on is used the script depends completely on the break points defined in Bootstrap’s CSS. It’s not simple to make it autocollapse but you could check the following alternative solution:

http://www.smartmenus.org/forums/topic/more-option-for-desktop-menu/

[admin]

The default fancybox z-index is 8020 defined in:

http://kwasi.com/sample/css/fancybox.css

and the default SmartMenus z-index is 9999 defined in:

http://kwasi.com/sample/css/sm-core-css.css

So to fix the issue you would need to set your main menu’s z-index to something lower than 8020 – e.g. you could use something like this:

#main-menu {
	z-index:8000;
}

[admin]

Please also pass the 'container' => 'false' parameter and it should work – e.g.:

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => 'false', 'menu_id' => 'main-menu', 'menu_class' => 'sm sm-mint' ) ); ?>

[admin]

Sorry, but I’m not sure what exactly you are trying to achieve. If you like, please post a link to some kind of live demo and explain how exactly it should work. But please note that if you are using the Bootstrap addon, it only supports navbars.

[admin]

Set the z-index of your green menu to something higher than 9999 which is the default SmartMenus value defined in “sm-core-css.css” – e.g.:

#green-menu {
	position: relative;
	z-index: 10000;
}

[admin]

You’ve listed a number of issues that are most probably caused by some custom CSS you’ve added or things you’ve tried to customize. I would suggest if you can’t cope with the configuration of the theme on your own without any major issues to just use one of the default themes as it is without trying to customize anything.

[admin]

z-index only works if you set position too – e.g.:

#bb {
	position: relative;
	z-index: 222222;
}

The default SmartMenus z-index defined in “sm-core-css.css” is 9999 so anything above that should work if you are coding your CSS properly.

[admin]

Set the heading’s display to inline-block:

.main-menu-heading {
	display: inline-block;
}

and make sure the .main-menu-btn is not floated to the right.

Then the order in which they will be displayed (both left aligned) is a matter of which you would put first in the page source.

[admin]

If you use the markCurrentItem: true option, the script will automatically add the “current” class to the proper item so you won’t need to do it server-side with PHP:

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

As for the “has-submenu” class – it is automatically added to the parent items’ A elements when the script initializes the menu tree so you don’t have to worry about it.

[admin]

Doesn’t this work?

@media (min-width: 768px) {
	#main-menu {
		width: 12em;
	}
}

[admin]

As a start, you could put it between <script type="text/javascript"> and </script> tags. Then if you would like to keep the functionality, it’s better to add the code in a .js file and link it after the SmartMenus core “jquery.smartmenus.js” file in the page source.

[admin]

You will need to stop the propagation of the click event for the target element that you use as a trigger for the popup – e.g. if you have a link like this:

<a href="#" id="show-main-menu">Show popup</a>

you would need to use something like this:

$('#show-main-menu').click(function(e) {
	toggledisplay();
	e.stopPropagation();
	e.preventDefault();
});

[admin]

Here is some sample code that will make the main menu links load on first click/tap in mobile view:

$(function() {
	var $mainMenu = $('#main-menu');

	// don't show the sub menus in collapsible mode unless the sub arrow is clicked
	$mainMenu.on('click', 'span.sub-arrow', function(e) {
			var obj = $mainMenu.data('smartmenus');
			if (obj.isCollapsible()) {
				var $item = $(this).parent(),
					$sub = $item.closest('li').dataSM('sub');
				$sub.dataSM('arrowClicked', true);
			}
		}).bind({
			'beforeshow.smapi': function(e, menu) {
				var obj = $mainMenu.data('smartmenus');
				if (obj.isCollapsible()) {
					var $menu = $(menu);
					if (!$menu.dataSM('arrowClicked')) {
						return false;
					}
					$menu.removeDataSM('arrowClicked');
				}
			}
		});
});

Please let me know if you have any troubles.

Cheers!

[admin]

Here’s some sample code how you could align the icon to the right and add a logo/text to the left:

http://www.smartmenus.org/forums/topic/change-default-align-for-toggle-menu-button-and-add-menu-text/

[admin]

The simplest solution is to edit the breakpoint in the theme you use. For example, if you use the “sm-blue” theme, find the following in “sm-blue.css”:

@media (min-width: 768px) {

and change it like this:

@media (min-width: 1px) {

[admin]

OK, here is something that should work (even if you are using any SmartMenus addon). You need to include this on your page after the SmartMenus script “jquery.smartmenus.js”:

$.SmartMenus.prototype.old_init = $.SmartMenus.prototype.init;
$.SmartMenus.prototype.init = function(refresh) {
	if (!refresh && !this.$root.hasClass('sm-vertical')) {
		var $originalItems = this.$root.children('li'),
			$moreSub = this.$root.clone().removeAttr('id').removeAttr('class').addClass('dropdown-menu'),
			$moreSubItems = $moreSub.children('li'),
			$moreItem = $('<li><a href="#">More <span class="caret"></span></a></li>').append($moreSub).appendTo(this.$root),
			self = this,
			vieportW,
			hiddenItems = [],
			hiddenMoreItems = [];
	}

	this.old_init(refresh);

	if (!refresh && !this.$root.hasClass('sm-vertical')) {
		function handleResize() {
			var curWidth = $(window).width();
			if (vieportW !== curWidth) {
				// hide More item
				$moreItem.detach();

				// show all main menu items
				$.each(hiddenItems, function() { $(this).appendTo(self.$root); });
				hiddenItems = [];

				// show all More sub items
				$.each(hiddenMoreItems, function() { $(this).prependTo($moreSub); });
				hiddenMoreItems = [];

				// if in desktop view and the last item is wrapped
				if (!self.isCollapsible() && $originalItems.eq(-1)[0].offsetTop != $originalItems.eq(0)[0].offsetTop) {
					// show More item
					$moreItem.appendTo(self.$root);

					// while the More item is wrapped
					while ($moreItem[0].offsetTop != $originalItems.eq(0)[0].offsetTop) {
						hiddenItems.unshift($moreItem.prev('li').detach());
					};

					// hide proper More sub items
					$moreSubItems.slice(0, $moreSubItems.length - hiddenItems.length).each(function() {
						hiddenMoreItems.unshift($(this).detach());
					});
				}

				// save new viewport width
				vieportW = curWidth;
			}
		}
		handleResize();

		$(window).bind('load.smartmenus resize.smartmenus', handleResize);
	}
};

It doesn’t need any configuration and will work for any horizontal main menu.

I like the idea very much and in the future this might actually become an official addon after some possible code optimizations, etc. But it should work just fine for now as it is.

Please let me know if you have any questions.

[admin]

As I am thinking, it can’t be done just with CSS but a JS solution is possible and not too difficult on theory. I will try to find some time in the coming days and prototype something.

I will post again here when there’s any news…

Cheers!

[admin]

Assuming you are using the sample code from here:

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

for example, you could achieve it by making the following changes:

HTML:

<!-- Mobile menu toggle button (hamburger/x icon) -->
<input id="main-menu-state" type="checkbox" />
<label class="main-menu-btn" for="main-menu-state">
  <span class="main-menu-btn-icon"></span> Toggle main menu visibility
</label>

<h3 class="main-menu-heading">MENU</h3>

<!-- Sample menu definition -->
<ul id="main-menu" class="sm sm-blue"> ...

CSS:

#main-menu {
  clear: both;
}
.main-menu-heading {
  /* style the MENU text as you like here */
}
@media (min-width: 768px) {
  .main-menu-heading {
    display: none;
  }
}
.main-menu-btn {
  float: right;
  /* ... the declarations from the Docs */
}
/*... the rest of the rules from the Docs */

Hope it’s clear enough. Cheers!

[admin]

Actually, what is meant is that if you use hideFunction: null then the jQuery hide function will be used with hideDuration as the duration parameter. So, I guess you’re right and it’s not well explained in the docs as it doesn’t make it very clear. We’ll consider updating the docs, thanks!

[admin]

Np at all! Cheers!

[Author]

Posts