Menu icon Foundation
Menu tab-bar not work in mobile devices

I used the responsive tool of tab-bar for show the menu in mobile devices but does not work in mobile devices.

I put the follow code:

<div class="off-canvas-wrap" data-offcanvas>
        	<div class="inner-wrap">
    			<nav class="tab-bar show-for-medium-down" data-topbar>
    				<section class="left-small">
    					<a class="left-off-canvas-toggle menu-icon" ><span> </span></a>
    				</section>
    				<section class="middle tab-bar-section">
				    	<a class="logo_mobile"> </a>
				    </section>
    			</nav><!--NAV BAR MOBILE-->
    			<aside class="left-off-canvas-menu" id="menu_mobile">
			    	
			    </aside>

And call the scripts in the follow order:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
        <script src="js/foundation.min.js"></script>
    	<script src="js/vendor/modernizr.js"></script>
    	<script src="js/foundation/foundation.topbar.js"></script>
		<script>
		  $(document).foundation();
		</script>
            

         

In desktop version making resize to the browser window works but in mobile devices not work. Please somebody helpme!

Thanks

tab-barmobile devicesmobileFoundation 5

I used the responsive tool of tab-bar for show the menu in mobile devices but does not work in mobile devices.

I put the follow code:

<div class="off-canvas-wrap" data-offcanvas>
        	<div class="inner-wrap">
    			<nav class="tab-bar show-for-medium-down" data-topbar>
    				<section class="left-small">
    					<a class="left-off-canvas-toggle menu-icon" ><span> </span></a>
    				</section>
    				<section class="middle tab-bar-section">
				    	<a class="logo_mobile"> </a>
				    </section>
    			</nav><!--NAV BAR MOBILE-->
    			<aside class="left-off-canvas-menu" id="menu_mobile">
			    	
			    </aside>

And call the scripts in the follow order:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
        <script src="js/foundation.min.js"></script>
    	<script src="js/vendor/modernizr.js"></script>
    	<script src="js/foundation/foundation.topbar.js"></script>
		<script>
		  $(document).foundation();
		</script>
            

         

In desktop version making resize to the browser window works but in mobile devices not work. Please somebody helpme!

Thanks

Juan David Perafan about 5 years ago

I already fix the problem, is just insert a simple line of code after the initialise of foundation:
$('.menu-icon').click(function(){ false });

<script>
      $(document).foundation();
       $('.menu-icon').click(function(){ false });
    </script>