Menu icon Foundation
Responsive menu not toggling

I am running F 6.1.1 and seem to be unable to get the toggle working for the menu on a narrow screen.

I am looking at the docs http://foundation.zurb.com/sites/docs/responsive-navigation.html and it seems identical, but unsure why it fails.

Any ideas ?

Here is the code:

Responsivenavigationtogglemenu

I am running F 6.1.1 and seem to be unable to get the toggle working for the menu on a narrow screen.

I am looking at the docs http://foundation.zurb.com/sites/docs/responsive-navigation.html and it seems identical, but unsure why it fails.

Any ideas ?

Here is the code:

Brian Tan almost 4 years ago

Make sure jQuery and Foundation plugins are included in your headers.

And don't forget to initialize foundation.

Andrew Walker almost 4 years ago

Hi Brian,

Yes, they are included in the headers.

Here is the code for the headers:

    <!-- Foundation 6 -->
    <link rel="stylesheet" href="<?php echo HOME; ?>/css/foundation.css" />
    <link rel="stylesheet" href="<?php echo HOME; ?>/css/app.css" />

    <script src="<?php echo HOME; ?>/js/vendor/jquery.min.js"></script>
    <script src="<?php echo HOME; ?>/js/foundation.js"></script>
    <script src="<?php echo HOME; ?>/js/app.js"></script>

I can see from looking at the debug in the browser it is loading. But just incase I added them to the file itself, but still not working.

<!-- Foundation 6 -->
<link rel="stylesheet" href="<?php echo HOME; ?>/css/foundation.css" />
<link rel="stylesheet" href="<?php echo HOME; ?>/css/app.css" />
<script src="<?php echo HOME; ?>/js/vendor/jquery.min.js"></script>
<script src="<?php echo HOME; ?>/js/foundation.js"></script>
<script src="<?php echo HOME; ?>/js/app.js"></script>

<header>
    <div class="title-bar" data-responsive-toggle="ex-menu" data-hide-for="medium">
        <button class="menu-icon" type="button" data-toggle></button>
        <div class="title-bar-title">Menu</div>
    </div>
    <div class="top-bar">
        <div class="top-bar-left" style="padding-left: 25px">
            <a href="<?php echo HOME; ?>/index.php">
                <img style="vertical-align: middle" src="<?php echo HOME; ?>/images/site/logo.png" />
            </a>
        </div>
        <div class="top-bar-right" id="ex-menu">
            <ul class="menu" style="padding-top:25px">
                <li <?php echo $page_title=="Home" ? "class='menuactive'" : ""; ?> >
                    <a href="<?php echo HOME; ?>/index.php">Home</a>
                </li>
                <li <?php echo $page_title=="About" ? "class='menuactive'" : ""; ?> >
                    <a href="<?php echo HOME; ?>/about.php">About Us</a>
                </li>
                <li <?php echo $page_title=="Our Capabilities" ? "class='menuactive'" : ""; ?> >
                    <a href="<?php echo HOME; ?>/capabilities.php">Our Capabilities</a>
                </li>
                <li <?php echo $page_title=="Contact" ? "class='menuactive'" : ""; ?> >
                    <a href="<?php echo HOME; ?>/contact.php">Contact Us</a>
                </li>
                <li <?php echo $page_title=="Products" ? "class='menuactive'" : ""; ?> >
                    <a href="<?php echo HOME; ?>/cart/products.php">Products</a>
                </li>
                <li <?php echo $page_title=="Cart" ? "class='menuactive'" : ""; ?> >
                    <a href="<?php echo HOME; ?>/cart/cart.php">
                        <!-- count products in cart -->
                        <?php $cart_count=count($_SESSION['cart_items']); ?>
                        Cart <span class="badge" id="comparison-count"><?php echo $cart_count; ?></span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</header>

But still no joy ?

Andrew Walker almost 4 years ago

Okay, it was because I did not add the $(document).foundation(); even though it was in the App.js which was included, but that was because I had it at the top, rather than bottom.

Sorted now.

Thanks Brian.