menu toggle button - help needed

[robii1]

I am trying to add a menu toggle button so that the menu is collapsed when viewing on small screens, but after following the instructions here http://www.smartmenus.org/docs/#menu-toggle-button, my menu disappears completely when viewed on a small screen.

And a second problem is my sub menus no longer appear on a full size screen.

Everything was working perfectly before I added the additional code.

Use this page as an example – http://www.thephonefinder.co.uk/proddetail.php?prod=1100lcd (please view source to see how my UL element looks as I can’t seem to post it on here)

I added this code to sm-blue.css:

#menu-button {
  display:none;
  background: #3193c0;
  /* style it as you like... */
}
#menu-button:before {
  content:'Menu -';
}
#menu-button.collapsed:before {
  content:'Menu +';
}
@media screen and (max-width: 640px) {
  /* show the button on small screens */
  #menu-button {
    display:inline-block;
  }
  /* hide the menu when it has the "collapsed" class set by the script */
  #main-menu.collapsed {
    display:none;
  }
}

I added this code to jquery.smartmenus.js:

$(function() {
  $('#menu-button').click(function() {
    var $this = $(this),
        $menu = $('#main-menu');
    if (!$this.hasClass('collapsed')) {
      $menu.addClass('collapsed');
      $this.addClass('collapsed');
    } else {
      $menu.removeClass('collapsed');
      $this.removeClass('collapsed');
    }
    return false;
  }).click();
});

What have I done wrong?

[admin]

Hi, the problem is that you have added the menu button as part of your main menu (as the first item). Just move it out and add it, for example, right before the main menu – e.g.:

<a id="menu-button"></a>
<ul id="main-menu" class="sm collapsed sm-blue">
...

and it should work.

Cheers!

[robii1]

Great! Thank you

[Author]

Posts