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.

Toggle and a Link

Home Forums Older releases 0.9.x Toggle and a Link

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

    Hi, I’m currently using Smartmenus on a client site but they have asked for a change from the default behavior. For navigation items that have a submenu in the mobile view, they would like to have the parent link be clickable and separate from the toggle. I followed the advice on another discussion here about adding the “minus” sign on toggle (also what they wanted) but now the parent link is unclickable and only serves as part of the toggle. Is there a way to achieve this?

    Thanks for any advice.


    Hi, here is how you could do it (there might be even a bit simpler way to achieve it but this is what came to my mind at the moment).

    I think it makes sense to use the sub arrows (SPAN’s) as toggle elements since they are already there for us. You might just need to tweak their style on small screens – i.e. make them bigger and easier to hit, tweak their positions, etc. And then you need just the following additional JS ondomready:

    var $mainMenu = $('#main-menu').on('click', 'span.sub-arrow', function(e) {
    		// toggle the sub menu on sub arrow click in collapsible mode
    		var obj = $'smartmenus');
    		if (obj.isCollapsible()) {
    			var $item = $(this).parent(),
    				$sub = $item.parent().dataSM('sub'),
    				subIsVisible = $sub.dataSM('shown-before') && $':visible');
    			$sub.dataSM('arrowClicked', true);
    			if (subIsVisible) {
    		// don't show the sub menu in collapsible mode unless the sub arrow is clicked
    		'beforeshow.smapi': function(e, menu) {
    			var obj = $'smartmenus');
    			if (obj.isCollapsible()) {
    				var $menu = $(menu);
    				if (!$menu.dataSM('arrowClicked')) {
    					return false;
    		'show.smapi': function(e, menu) {
    		'hide.smapi': function(e, menu) {

    Please let me know if you have any questions.



    Works perfectly, thank you for the quick response and such a robust plugin.


    Hi admin,
    I’m using the Bootstrap version and I want to be able to do the same thing – ie, at collapsed/mobile, allow the parent link to follow the href and only toggle using the span.sub-arrow

    I tried this code, but it’s not working for the Bootstrap version. Any advice?

    Thanks in advance,


    Sorry, ignore that for a second – I think I got it working… had a typo! Doh!

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