Menu icon Foundation
offcanvas issue on open and close in android default browser

hi guys i am having an issue that foundation 6 offcanvas menu is not working on click.

I check on opera mini , opera , uc browser and its not working there why its happening :(

Here is my code any help would be appreciated

<div class="off-canvas position-left light-off-menu" id="offCanvas" data-off-canvas>
            <div class="off-menu-close">
                <h3>Menu</h3>
                <span data-toggle="offCanvas"><i class="fa fa-times"></i></span>
            </div>
            <ul class="vertical menu off-menu" data-responsive-menu="drilldown">
                <li class="has-submenu">
                    <a href="#"><i class="fa fa-home"></i>Home</a>
                    <ul class="submenu menu vertical" data-submenu data-animate="slide-in-down slide-out-up">
                        <li><a href="index.html"><i class="fa fa-home"></i>Home page v1</a></li>
                        <li><a href="home-v2.html"><i class="fa fa-home"></i>Home page v2</a></li>
                        <li><a href="home-v3.html"><i class="fa fa-home"></i>Home page v3</a></li>
                        <li><a href="home-v4.html"><i class="fa fa-home"></i>Home page v4</a></li>
                        <li><a href="home-v5.html"><i class="fa fa-home"></i>Home page v5</a></li>
                        <li><a href="home-v6.html"><i class="fa fa-home"></i>Home page v6</a></li>
                        <li><a href="home-v7.html"><i class="fa fa-home"></i>Home page v7</a></li>
                        <li><a href="home-v8.html"><i class="fa fa-home"></i>Home page v8</a></li>
                        <li><a href="home-v9.html"><i class="fa fa-home"></i>Home page v9</a></li>
                        <li><a href="home-v10.html"><i class="fa fa-home"></i>Home page v10</a></li>
                    </ul>
                </li>
                <li class="has-submenu" data-dropdown-menu="example1">
                    <a href="#"><i class="fa fa-film"></i>Videos</a>
                    <ul class="submenu menu vertical" data-submenu data-animate="slide-in-down slide-out-up">
                        <li><a href="single-video-v1.html"><i class="fa fa-film"></i>single video v1</a></li>
                        <li><a href="single-video-v2.html"><i class="fa fa-film"></i>single video v2</a></li>
                        <li><a href="single-video-v3.html"><i class="fa fa-film"></i>single video v3</a></li>
                        <li><a href="submit-post.html"><i class="fa fa-film"></i>submit post</a></li>
                    </ul>
                </li>
                <li><a href="categories.html"><i class="fa fa-th"></i>category</a></li>
                <li>
                    <a href="blog.html"><i class="fa fa-edit"></i>blog</a>
                    <ul class="submenu menu vertical" data-submenu data-animate="slide-in-down slide-out-up">
                        <li><a href="blog-single-post.html"><i class="fa fa-edit"></i>blog single post</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#"><i class="fa fa-magic"></i>features</a>
                    <ul class="submenu menu vertical" data-submenu data-animate="slide-in-down slide-out-up">
                        <li><a href="404.html"><i class="fa fa-magic"></i>404 Page</a></li>
                        <li><a href="archives.html"><i class="fa fa-magic"></i>Archives</a></li>
                        <li><a href="login.html"><i class="fa fa-magic"></i>login</a></li>
                        <li><a href="login-forgot-pass.html"><i class="fa fa-magic"></i>Forgot Password</a></li>
                        <li><a href="login-register.html"><i class="fa fa-magic"></i>Register</a></li>
                        <li>
                            <a href="#"><i class="fa fa-magic"></i>profile</a>
                            <ul class="submenu menu vertical" data-submenu data-animate="slide-in-down slide-out-up">
                                <li><a href="profile-page-v1.html"><i class="fa fa-magic"></i>profile v1</a></li>
                                <li><a href="profile-page-v2.html"><i class="fa fa-magic"></i>profile v2</a></li>
                                <li><a href="profile-about-me.html"><i class="fa fa-magic"></i>Profile About Me</a></li>
                                <li><a href="profile-comments.html"><i class="fa fa-magic"></i>profile comments</a></li>
                                <li><a href="profile-favorite.html"><i class="fa fa-magic"></i>profile favorites</a></li>
                                <li><a href="profile-followers.html"><i class="fa fa-magic"></i>profile followers</a></li>
                                <li><a href="profile-settings.html"><i class="fa fa-magic"></i>profile settings</a></li>
                            </ul>
                        </li>
                        <li><a href="profile-video.html"><i class="fa fa-magic"></i>Author Page</a></li>
                        <li><a href="search-results.html"><i class="fa fa-magic"></i>search results</a></li>
                        <li><a href="terms-condition.html"><i class="fa fa-magic"></i>Terms &amp; Condition</a></li>
                    </ul>
                </li>
                <li><a href="about-us.html"><i class="fa fa-user"></i>about</a></li>
                <li><a href="contact-us.html"><i class="fa fa-envelope"></i>contact</a></li>
            </ul>
            <div class="responsive-search">
                <form method="post">
                    <div class="input-group">
                        <input class="input-group-field" type="text" placeholder="search Here">
                        <div class="input-group-button">
                            <button type="submit" name="search"><i class="fa fa-search"></i></button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="off-social">
                <h6>Get Socialize</h6>
                <a href="#"><i class="fa fa-facebook"></i></a>
                <a href="#"><i class="fa fa-twitter"></i></a>
                <a href="#"><i class="fa fa-google-plus"></i></a>
                <a href="#"><i class="fa fa-instagram"></i></a>
                <a href="#"><i class="fa fa-vimeo"></i></a>
                <a href="#"><i class="fa fa-youtube"></i></a>
            </div>
            <div class="top-button">
                <ul class="menu">
                    <li>
                        <a href="submit-post.html">upload Video</a>
                    </li>
                    <li class="dropdown-login">
                        <a href="login.html">login/Register</a>
                    </li>
                </ul>
            </div>
        </div>
<div class="title-bar" data-responsive-toggle="beNav" data-hide-for="large">
                                <button class="menu-icon" type="button" data-toggle="offCanvas"></button>
                                <div class="title-bar-title"><img src="images/logo-small.png" alt="logo"></div>
                            </div>

Thanks

off canvasoffcanvasfoundation 6foundation 6 offcanvas

hi guys i am having an issue that foundation 6 offcanvas menu is not working on click.

I check on opera mini , opera , uc browser and its not working there why its happening :(

Here is my code any help would be appreciated

<div class="off-canvas position-left light-off-menu" id="offCanvas" data-off-canvas>
            <div class="off-menu-close">
                <h3>Menu</h3>
                <span data-toggle="offCanvas"><i class="fa fa-times"></i></span>
            </div>
            <ul class="vertical menu off-menu" data-responsive-menu="drilldown">
                <li class="has-submenu">
                    <a href="#"><i class="fa fa-home"></i>Home</a>
                    <ul class="submenu menu vertical" data-submenu data-animate="slide-in-down slide-out-up">
                        <li><a href="index.html"><i class="fa fa-home"></i>Home page v1</a></li>
                        <li><a href="home-v2.html"><i class="fa fa-home"></i>Home page v2</a></li>
                        <li><a href="home-v3.html"><i class="fa fa-home"></i>Home page v3</a></li>
                        <li><a href="home-v4.html"><i class="fa fa-home"></i>Home page v4</a></li>
                        <li><a href="home-v5.html"><i class="fa fa-home"></i>Home page v5</a></li>
                        <li><a href="home-v6.html"><i class="fa fa-home"></i>Home page v6</a></li>
                        <li><a href="home-v7.html"><i class="fa fa-home"></i>Home page v7</a></li>
                        <li><a href="home-v8.html"><i class="fa fa-home"></i>Home page v8</a></li>
                        <li><a href="home-v9.html"><i class="fa fa-home"></i>Home page v9</a></li>
                        <li><a href="home-v10.html"><i class="fa fa-home"></i>Home page v10</a></li>
                    </ul>
                </li>
                <li class="has-submenu" data-dropdown-menu="example1">
                    <a href="#"><i class="fa fa-film"></i>Videos</a>
                    <ul class="submenu menu vertical" data-submenu data-animate="slide-in-down slide-out-up">
                        <li><a href="single-video-v1.html"><i class="fa fa-film"></i>single video v1</a></li>
                        <li><a href="single-video-v2.html"><i class="fa fa-film"></i>single video v2</a></li>
                        <li><a href="single-video-v3.html"><i class="fa fa-film"></i>single video v3</a></li>
                        <li><a href="submit-post.html"><i class="fa fa-film"></i>submit post</a></li>
                    </ul>
                </li>
                <li><a href="categories.html"><i class="fa fa-th"></i>category</a></li>
                <li>
                    <a href="blog.html"><i class="fa fa-edit"></i>blog</a>
                    <ul class="submenu menu vertical" data-submenu data-animate="slide-in-down slide-out-up">
                        <li><a href="blog-single-post.html"><i class="fa fa-edit"></i>blog single post</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#"><i class="fa fa-magic"></i>features</a>
                    <ul class="submenu menu vertical" data-submenu data-animate="slide-in-down slide-out-up">
                        <li><a href="404.html"><i class="fa fa-magic"></i>404 Page</a></li>
                        <li><a href="archives.html"><i class="fa fa-magic"></i>Archives</a></li>
                        <li><a href="login.html"><i class="fa fa-magic"></i>login</a></li>
                        <li><a href="login-forgot-pass.html"><i class="fa fa-magic"></i>Forgot Password</a></li>
                        <li><a href="login-register.html"><i class="fa fa-magic"></i>Register</a></li>
                        <li>
                            <a href="#"><i class="fa fa-magic"></i>profile</a>
                            <ul class="submenu menu vertical" data-submenu data-animate="slide-in-down slide-out-up">
                                <li><a href="profile-page-v1.html"><i class="fa fa-magic"></i>profile v1</a></li>
                                <li><a href="profile-page-v2.html"><i class="fa fa-magic"></i>profile v2</a></li>
                                <li><a href="profile-about-me.html"><i class="fa fa-magic"></i>Profile About Me</a></li>
                                <li><a href="profile-comments.html"><i class="fa fa-magic"></i>profile comments</a></li>
                                <li><a href="profile-favorite.html"><i class="fa fa-magic"></i>profile favorites</a></li>
                                <li><a href="profile-followers.html"><i class="fa fa-magic"></i>profile followers</a></li>
                                <li><a href="profile-settings.html"><i class="fa fa-magic"></i>profile settings</a></li>
                            </ul>
                        </li>
                        <li><a href="profile-video.html"><i class="fa fa-magic"></i>Author Page</a></li>
                        <li><a href="search-results.html"><i class="fa fa-magic"></i>search results</a></li>
                        <li><a href="terms-condition.html"><i class="fa fa-magic"></i>Terms &amp; Condition</a></li>
                    </ul>
                </li>
                <li><a href="about-us.html"><i class="fa fa-user"></i>about</a></li>
                <li><a href="contact-us.html"><i class="fa fa-envelope"></i>contact</a></li>
            </ul>
            <div class="responsive-search">
                <form method="post">
                    <div class="input-group">
                        <input class="input-group-field" type="text" placeholder="search Here">
                        <div class="input-group-button">
                            <button type="submit" name="search"><i class="fa fa-search"></i></button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="off-social">
                <h6>Get Socialize</h6>
                <a href="#"><i class="fa fa-facebook"></i></a>
                <a href="#"><i class="fa fa-twitter"></i></a>
                <a href="#"><i class="fa fa-google-plus"></i></a>
                <a href="#"><i class="fa fa-instagram"></i></a>
                <a href="#"><i class="fa fa-vimeo"></i></a>
                <a href="#"><i class="fa fa-youtube"></i></a>
            </div>
            <div class="top-button">
                <ul class="menu">
                    <li>
                        <a href="submit-post.html">upload Video</a>
                    </li>
                    <li class="dropdown-login">
                        <a href="login.html">login/Register</a>
                    </li>
                </ul>
            </div>
        </div>
<div class="title-bar" data-responsive-toggle="beNav" data-hide-for="large">
                                <button class="menu-icon" type="button" data-toggle="offCanvas"></button>
                                <div class="title-bar-title"><img src="images/logo-small.png" alt="logo"></div>
                            </div>

Thanks

Philippe Delberghe / AmaZili almost 3 years ago

This is not a solution, but can be a path for searching why : 

 

check if your <html> tag is <html class="no-js" lang="en">while executing the code.

it should change to <html class="js" lang="fr"> upon execution of the page.

 

otherwise, nothing works properly including off-canvas.

 

I have this issue with IE11 and Iphone4S safari browser that I have not solved yet.

 

Hope this help

 

Philippe

Philippe Delberghe / AmaZili almost 3 years ago

For a correct information, I am using Version 6.2.1 version of foundation

hassan almost 3 years ago

yes i found the problem was with 6.2.o version and i just updated js file and my problem is solved

thanks @philippe