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.

menu don't break on Android

Home › Forums › Latest release › 1.1.x › menu don't break on Android

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • September 4, 2018 at 08:01 #8336
    ben.f
    Participant

    I download the last version of smartmenus(1.1.0). In my header I include ‘jquery.smartmenus.js’ (Jquery as well). My HTML menu looks like this:

    <nav id="main-nav">
	<!-- 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="nav-brand"><a href="#">NAME</a></h3>
	<ul id="main-menu" class="sm sm-mint">...</ul>
</nav>

    and I had this script :

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

// SmartMenus mobile menu toggle button
$(function() {
  var $mainMenuState = $('#main-menu-state');
  if ($mainMenuState.length) {
    // animate mobile menu
    $mainMenuState.change(function(e) {
      var $menu = $('#main-menu');
      if (this.checked) {
        $menu.hide().slideDown(250, function() { $menu.css('display', ''); });
      } else {
        $menu.show().slideUp(250, function() { $menu.css('display', ''); });
      }
    });
    // hide mobile menu beforeunload
    $(window).bind('beforeunload unload', function() {
      if ($mainMenuState[0].checked) {
        $mainMenuState[0].click();
      }
    });
  }
});

    Everything is working fine on desktop( when I resize the browser the menu break properly) but on on my mobile (Android 7.0) the menu doesn’t break, it still display desktop menu. What am I doing wrong? How can I have smartmenus break on mobile?

    September 5, 2018 at 19:10 #8338
    admin
    Keymaster

    Have you included a viewport meta tag in the <head> section of your pages? Something like this:

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    If yes and it’s still not working, then please post some kind of demo URL since it’s not easy to guess what might be wrong without checking your exact code.

    September 6, 2018 at 12:56 #8339
    ben.f
    Participant

    Thank you, it works fine now.

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘1.1.x’ is closed to new topics and replies.