CODEWITHSUNDEEP
javascriptmobiletogglezurb-foundation-6
user5176291
user5176291

Reputation: 167

Foundation 6 Menu Responsive Toggle Not Working

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 a links to one of the pages pages:

http://robertrhu.net/desrosiers/single-residential.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 IN FACT IN THE HEAD: enter image description here

Upvotes: 1

Views: 2170

Answers (1)

user5176291
user5176291

Reputation: 167

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. :)

Upvotes: 4

Related Questions