Menu icon Foundation
Foundation 6 Mobile Menu Toggle

Hi there...would be so grateful for any assistance figuring out what's happening here. Thanks in advance!

I'm building a Foundation 6 mobile menu meant to hide at medium and above screen sizes, displaying for small screen sizes. But it is displaying both menus (desktop & mobile) and the title bar at medium and above as well as small.

Here's a screenshot of what is happening at medium and above screen sizes:

It seems that the necessary Javascript isn't loading but I'm not sure why...? There are no JS errors in the console.

My app.js file is located at src/assets/js. It has this, and only this, included in the page:

$(document).foundation();

I've updated Bower Components.

In my header I am loading app.js as follows:

<script src="{{root}}assets/js/app.js"></script>

In my header I am loading app.css as follows:

<link rel="stylesheet" href="{{root}}assets/css/app.css">

Here is how my mobile menu with toggle is built:

 

<!--Begin Mobile Title Bar Menu-->
<div id="mobile-title-bar"
     class="title-bar"
     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" />

        <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-->

togglemobile menuvisibilitydata-hide-forreveal

Hi there...would be so grateful for any assistance figuring out what's happening here. Thanks in advance!

I'm building a Foundation 6 mobile menu meant to hide at medium and above screen sizes, displaying for small screen sizes. But it is displaying both menus (desktop & mobile) and the title bar at medium and above as well as small.

Here's a screenshot of what is happening at medium and above screen sizes:

It seems that the necessary Javascript isn't loading but I'm not sure why...? There are no JS errors in the console.

My app.js file is located at src/assets/js. It has this, and only this, included in the page:

$(document).foundation();

I've updated Bower Components.

In my header I am loading app.js as follows:

<script src="{{root}}assets/js/app.js"></script>

In my header I am loading app.css as follows:

<link rel="stylesheet" href="{{root}}assets/css/app.css">

Here is how my mobile menu with toggle is built:

 

<!--Begin Mobile Title Bar Menu-->
<div id="mobile-title-bar"
     class="title-bar"
     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" />

        <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-->
Matthew Meaklim almost 3 years ago

I'm new to front end web development myself, but I'm nearly sure if you change your code slightly it will work.

Change:

<div id="mobile-title-bar" class="title-bar" data-responsive-toggle="mobile-menu" data-hide-for="medium">

To:

<div id="mobile-title-bar" class="title-bar hide-for-medium" data-responsive-toggle="mobile-menu">

I haven't tested that in a browser yet but give it a try and let me know if it works.

Also, take a look here for Foundations Visibility Classes.

Thanks,

Matthew

Robert Rhu almost 3 years ago

Hi Matthew,

 

Thank you so much for the response.

I actually had done what've suggested earlier and it certainly does make it so the title-bar hides at medium and above screen sizes.

But it doesn't address the issue of the mobile menu displaying all the time, and the toggle does not work.

I'm fairly certain it is a javascript issue. I've also recently built an Orbit slider that is not functioning. The Foundation core Javascript isn't loading properly. Not sure why...

 

Thanks!

Robert