Menu icon Foundation
Menu Responsive Toggle

Hi there,

I'm building a website using Foundation 6. For some reason, my mobile menu isn't functioning. The menu is visible upon page load and the toggle does not function.

My first hunch is that javascript isn't properly loaded. app.js is loaded in the head. It seems that some other JS is working throughout the site. There are no errors in the console.

I'm stumped. 

Any and all insight would be greatly appreciated.

Thanks in advance!

Here's are links to some pages:

http://robertrhu.net/desrosiers/home.html

http://robertrhu.net/desrosiers/single-residential.html

http://robertrhu.net/desrosiers/archive-news.html

HERE'S THE HTML FOR THE MOBILE MENU 

<!--Begin Mobile Title Bar Menu-->
<div id="mobile-title-bar"
     class="title-bar hide-for-medium"
     data-responsive-toggle="mobile-menu"
     data-hide-for="medium">

    <img id="mobile-logo"
         src="../assets/img/desrosiers-architects-mobile-logo.png"
         alt="Desrosiers Architects : Bloomfield, MI" />

    <h1>
        Main Heading
    </h1>

    <button class="menu-icon"
            type="button"
            data-toggle="mobile-menu">
    </button>

</div>
<!--End Mobile Title Bar Menu-->

<!--Begin Mobile Navigation Menu-->
<div id="mobile-menu"
     class="top-bar"
     data-animate="hinge-in-from-top spin-out">

    <ul id="mobile-nav"
        class="vertical menu">

        <li class="menu-item">
            <a href="residential.html">Residential</a>
        </li>

        <li class="menu-item">
            <a href="residential.html">Commercial</a>
        </li>

        <li class="menu-item">
            <a href="residential.html">New Projects</a>
        </li>

        <li class="menu-item">
            <a href="residential.html">Process</a>
        </li>

        <li class="menu-item">
            <a href="residential.html">Profile</a>
        </li>

        <li class="menu-item">
            <a href="residential.html">In The News</a>
        </li>

        <li class="menu-item">
            <a href="residential.html">About</a>
        </li>

    </ul>

</div>
<!--End Mobile Navigation Menu-->

HERE'S THE SCSS FOR THE MOBILE MENU:

#mobile-menu {
    background-color: transparent;
    display: none;

    ul#mobile-nav {
        background-color: transparent;
        text-transform: uppercase;
        font-weight: 700;
        width: 150px;
        padding: 2px 0 3px 20px;

        li.menu-item {
            padding: 7px 0;

            a {
                padding: 0;
                transition: all 0.5s ease;
            }
        }

        li.menu-item:nth-of-type(3){
            padding-bottom: 18px;
        }

        li.menu-item:nth-of-type(4){
            padding-top: 18px;
            border-top: 1px dashed $anchor-color;
        }

    }

}

HERE'S A SCREENSHOT SHOWING THAT APP.JS IS CALLED IN THE HEAD:

mobile menutoggleapp.jsdata-toggleresponsive navigation

Hi there,

I'm building a website using Foundation 6. For some reason, my mobile menu isn't functioning. The menu is visible upon page load and the toggle does not function.

My first hunch is that javascript isn't properly loaded. app.js is loaded in the head. It seems that some other JS is working throughout the site. There are no errors in the console.

I'm stumped. 

Any and all insight would be greatly appreciated.

Thanks in advance!

Here's are links to some pages:

http://robertrhu.net/desrosiers/home.html

http://robertrhu.net/desrosiers/single-residential.html

http://robertrhu.net/desrosiers/archive-news.html

HERE'S THE HTML FOR THE MOBILE MENU 

<!--Begin Mobile Title Bar Menu-->
<div id="mobile-title-bar"
     class="title-bar hide-for-medium"
     data-responsive-toggle="mobile-menu"
     data-hide-for="medium">

    <img id="mobile-logo"
         src="../assets/img/desrosiers-architects-mobile-logo.png"
         alt="Desrosiers Architects : Bloomfield, MI" />

    <h1>
        Main Heading
    </h1>

    <button class="menu-icon"
            type="button"
            data-toggle="mobile-menu">
    </button>

</div>
<!--End Mobile Title Bar Menu-->

<!--Begin Mobile Navigation Menu-->
<div id="mobile-menu"
     class="top-bar"
     data-animate="hinge-in-from-top spin-out">

    <ul id="mobile-nav"
        class="vertical menu">

        <li class="menu-item">
            <a href="residential.html">Residential</a>
        </li>

        <li class="menu-item">
            <a href="residential.html">Commercial</a>
        </li>

        <li class="menu-item">
            <a href="residential.html">New Projects</a>
        </li>

        <li class="menu-item">
            <a href="residential.html">Process</a>
        </li>

        <li class="menu-item">
            <a href="residential.html">Profile</a>
        </li>

        <li class="menu-item">
            <a href="residential.html">In The News</a>
        </li>

        <li class="menu-item">
            <a href="residential.html">About</a>
        </li>

    </ul>

</div>
<!--End Mobile Navigation Menu-->

HERE'S THE SCSS FOR THE MOBILE MENU:

#mobile-menu {
    background-color: transparent;
    display: none;

    ul#mobile-nav {
        background-color: transparent;
        text-transform: uppercase;
        font-weight: 700;
        width: 150px;
        padding: 2px 0 3px 20px;

        li.menu-item {
            padding: 7px 0;

            a {
                padding: 0;
                transition: all 0.5s ease;
            }
        }

        li.menu-item:nth-of-type(3){
            padding-bottom: 18px;
        }

        li.menu-item:nth-of-type(4){
            padding-top: 18px;
            border-top: 1px dashed $anchor-color;
        }

    }

}

HERE'S A SCREENSHOT SHOWING THAT APP.JS IS CALLED IN THE HEAD:

Matteo Bianchini almost 3 years ago

I think it's my same issue

http://foundation.zurb.com/forum/posts/50498-foundation-top-bar-and-dropdown-menu

Robert Rhu almost 3 years ago

I figured out my problem. The app.js foundation initialization wasn't correct.

In the original package I downloaded had:

$(document).foundation();

I had to change it to:

$(document).ready(function(){

    $(document).foundation();

});

All my javascript is loading correctly now. :)

J. James over 2 years ago

Solved my FUOC problem with responsive menu. Thanks.

Matteo Bianchini over 2 years ago

This fixes the issue if you are using foundation inside React framework.

Credits to: Andrew Mead for the answer

This is a JavaScript component, so you'll need to initialize it before it will work.

You'll need to reinitialize Foundation if you're rendering a Foundation component to the screen after the initial call to $(document).foundation(); . You might be able to get away with an additional call to $(document).foundation(); from inside the component componentDidMount lifecycle method. Otherwise the JavaScript reference at the bottom of that page should work: http://foundation.zurb.com/sites/docs/dropdown-menu.html#javascript-reference