Zurb Foundation 6 off-canvas navigation not working on Android internet browser

Question

The menu icon will not toggle the off canvas menu. When clicked, it changes the opacity of the content section as usual, but doesn't slide to reveal the menu.

My navigation works on all browsers on my pc and mac, on iPhone and in Chrome on my android Samsung S4, but not it's stock "internet" browser (Samsung Browser 2.1) And it's strange because I just created another site with a similar Foundation 5 off-canvas menu that works fine. Has anyone else experienced this?

This is a wordpress site. My header.php:

<!doctype html>
<html class="no-js"  <?php language_attributes(); ?>>
<head>
    <meta charset="utf-8">
    <!-- Force IE to use the latest rendering engine available -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Mobile Meta -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta class="foundation-mq">
    <!-- If Site Icon isn't set in customizer -->
    <?php if ( ! function_exists( 'has_site_icon' ) || ! has_site_icon() ) { ?>
    <!-- Icons & Favicons -->
    <link rel="icon" href="<?php echo get_template_directory_uri(); ?>/favicon.png">
    <link href="<?php echo get_template_directory_uri(); ?>/assets/images/apple-icon-touch.png" rel="apple-touch-icon" />
            <!--[if IE]>
                <link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">
                <![endif]-->
                <meta name="msapplication-TileColor" content="#f01d4f">
                <meta name="msapplication-TileImage" content="<?php echo get_template_directory_uri(); ?>/assets/images/win8-tile-icon.png">
                <meta name="theme-color" content="#121212">
                <?php } ?>
                <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
                <?php wp_head(); ?>
                <!-- Drop Google Analytics here -->
                <!-- end analytics -->
</head>
<body <?php body_class(); ?>>

<div class="off-canvas-wrapper">
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>

        <!-- Mobile Menu -->
        <div class="off-canvas position-right" id="off-canvas" data-off-canvas data-position="right">
            <?php joints_off_canvas_nav(); ?>
        </div>

            <div class="off-canvas-content" data-off-canvas-content>

                <header class="header row" role="banner">
                    <!-- Secrest of the Horse Logo -->
                    <div class="small-6 column">
                        <h1 class="soth-logo float-left">
                            <a href="<?php echo home_url(); ?>"><?php bloginfo('title'); ?></a>
                        </h1>
                    </div>
                    <!-- add main sponsor on right -->  
                    <div class="small-6 column float-right">
                        <?php get_sidebar( 'main-sponsor' ); ?>
                    </div>
                </header> <!-- end .header -->

                <nav role="navigation">
                    <div class="top-bar" id="top-bar-menu">

                    <!-- Centered Desktop Menu Bar -->
                    <section class="top-bar-section show-for-large">
                        <?php //see assets/functions/menu.php
                        joints_top_nav(); ?>    
                    </section>

                    <!-- Mobile Menu Icon -->
                    <div class="top-bar-right hide-for-large">
                        <ul class="menu">
                            <li><a id="list-icon" data-toggle="off-canvas"><i><div class="fi-list"></div></i></a></li>
                        </ul>
                    </div>

                    </div>
                </nav> <!-- end .top-bar -->

score 0 · Answer 1 · answered Jul 17 '17 at 15:46

0

$(window).on('resize', function (ev) { ev.preventBubble(); });

worked for me, you might want to customize that so it doesn't prevent bubbling on all resize events.

answered Jul 17 '17 at 15:46

Taher

11,902
2
28
44

Thanks for your solution. I didn't get to try it out. I was able to update to Samsung Browser 5 and it works fine so I just moved on. – BradH Sep 05 '17 at 14:31

Zurb Foundation 6 off-canvas navigation not working on Android internet browser

1 Answers1