Castle Applications Group Castle Applications Group - 1 month ago 10
HTML Question

Foundation 6.2.4 responsive menu not working as it did with 6.0.0 (identical code)

This navigation bar worked as expected with Foundation 6.0.0. When changing the Foundation version to 6.2.4, the hidden button bar does not appear (nor does the top-bar disappear) on small screens.

Here is a fiddle of the Foundation 6.0.0 version that is working.
JSFiddle: https://jsfiddle.net/frur5y41/

<div class="title-bar" data-responsive-toggle="realEstateMenu" data-hide-for="small">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="realEstateMenu">
<div class="top-bar-left">
<ul class="menu" data-responsive-menu="accordion">
<li class="menu-text">Interplanetary</li>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
</div>
<script>
$(document).foundation();
</script>


Here is a fiddle of the same code using Foundation 6.2.4 (the responsiveness is not working).

JSFiddle: https://jsfiddle.net/g56gn37w/

Any help identifying the issue would be greatly appreciated.

Answer

It appears changing to data-hide-for="medium" fixes the problem.

So the entire code block would be:

<div class="title-bar" data-responsive-toggle="realEstateMenu" 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" id="realEstateMenu">
    <div class="top-bar-left">
        <ul class="menu" data-responsive-menu="accordion">
            <li class="menu-text">Interplanetary</li>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
        </ul>
    </div>
</div>    
<script>
    $(document).foundation();
</script>

JSFiddle here: https://jsfiddle.net/2dexkkj1/1/

Comments