foundation sticky Offcanvas menu not working with foundationpress theme

here’s is my site: http://fspb.valse.com.my/

the offcanvas menu is not working.I tried this fiddle :http://jsfiddle.net/KBne4/12/.

Read More

In normal site where I used foundation5 it worked.But when I used with Foundationpress theme (foundation + wordpress) it doesn’t work.

CSS

.off-canvas-fixed {
    -webkit-transition: -webkit-transform 500ms ease;
    transition: transform 500ms ease;




}
.left-off-canvas-toggle > .off-canvas-fixed {
    -webkit-transform: translate3d(15.625rem, 0, 0);
    transform: translate3d(15.625rem, 0, 0);
    height:100%;

}
.left-off-canvas-menu {
    -webkit-transform: none;
    transform: none;
    margin-left: -15.625rem;
    height: 100%;

}
.main-section {
    padding:45px 0 0;

}
.tab-bar {
    width:100%;

}
@media only screen and (orientation:landscape) and (max-width: 64em){
    .main-section {
        padding:0 0 0 2.8125rem;
    }
    .off-canvas-fixed {
        width:2.8125rem;
        height:100%;
        background:#333333;
    }
     section.left-small{
        border:none;
        box-shadow:none;
    }
}

HTML

<div class="off-canvas-wrap">
    <div class="fixed off-canvas-fixed hide-for-large-up"> <a class="exit-off-canvas"></a>

        <nav class="tab-bar">
            <section class="left-small"> <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>

            </section>
            <section class="show-for-portrait right tab-bar-section">
                 <h1 class="title">Logo</h1>

            </section>
        </nav>
        <aside class="left-off-canvas-menu">
            <ul class="off-canvas-list">
                <li class="show-for-small">

                    </li>
                    <li><a href="index.php">home</a></li>
                    <li><a href="productlisting.php" class="selected">product</a></li>
                    <li><a href="">help</a></li>

                    <li><a href="">contact</a></li>
                    <li><a href="">login/sign up</a></li>
            </ul>
        </aside>
    </div>
    <div class="inner-wrap"> <a class="exit-off-canvas"></a>

        </div>
    </div>

script

//sticky off-canvas

wp_register_script('my_amazing_script12', 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js', array('jquery'),'1.1', false);
wp_register_script('my_amazing_script13', 'http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/foundation.min.js', array('jquery'),'1.1', false);

wp_enqueue_script('my_amazing_script12');
wp_enqueue_script('my_amazing_script13');
}


add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts'); 

Related posts

Leave a Reply

1 comment