Responsive nav bar using foundation's top-bar class

0
votes

Troubles toggling the hamburger menu and large size menus based on screen sizes, using zurb-foundation top-bar framework.I get both top-bars one below the other, regardless of screen size.

I have tried rearranging the order in which i load the java script files for foundation, but no luck. I have read over the docs a million times and just cannot find the problem. I even commented out my entire top-bar and copied and pasted the one from the foundation site and it did the same thing.

What I think might be the issue: -since a similar thing happens with the exact code from the zurb-foundation docs, I'm wondering if it is the order I am en-queuing my scripts in my functions.php file for WordPress, some fresh eyes would be appreciated.

<div class="title-bar" data-responsive-toggle="responsive_menu" data-hide- 
    for="large">
    <button class="menu-icon" type="button" data-toggle></button>
    <div class="title-bar-title"></div>
</div>


<div class="top-bar" id="responsive_menu">
    <div class="top-bar-left">
        <ul class="medium-horizontal menu">
            <li class="menu-text">Save on Experiences</li>
        </ul>
    </div>
    <div class="top-bar-right">
        <ul class="medium-horizontal menu">
            <li><a href="#">Featured Discounts</a></li>
            <li><a href="#">Experiences</a></li>
            <li><a href="#">Reviews</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Support</a></li>
            <li><a href="#">News</a></li>
        </ul>
    </div>

</div>

snipping from functions.php

wp_enqueue_style('layout', get_template_directory_uri() . '/assets/css/foundation.min.css'); wp_enqueue_script('foundation-script-min', get_template_directory_uri() . '/assets/js/vendor/foundation.min.js', '', '', true); wp_enqueue_script('foundation-script-jquery', get_template_directory_uri() . '/assets/js/vendor/jquery.js', '', '', true); wp_enqueue_script('foundation-script-whatinput', get_template_directory_uri() . '/assets/js/vendor/what-input.js', '', '', true);

Functionality I want:

  • on small screens user views a hamburger menu only
  • on medium and up size screens the user does not see hamburger menu and has a proper size top-bar

Functionality thus far:

  • the toggle feature between the full size and hamburger size menu is not working
  • I get both top-bars one below the other, regardless of screen size
1
javascriptphpwordpresszurb-foundation

1 Answers

0
votes

for foundation version 6.5.3 you can use class to hide/show based on screen size, (show-for-medium, show-for-small-only). your markup can be changed like this

<div class="title-bar show-for-small-only" data-responsive-toggle="responsive_menu" data-hide- 
    for="large">
    <button class="menu-icon" type="button" data-toggle></button>
    <div class="title-bar-title"></div>


<div class="top-bar show-for-medium" id="responsive_menu">
    <div class="top-bar-left">
        <ul class="medium-horizontal menu">
            <li class="menu-text">Save on Experiences</li>
        </ul>
    </div>
    <div class="top-bar-right">
        <ul class="medium-horizontal menu">
            <li><a href="#">Featured Discounts</a></li>
            <li><a href="#">Experiences</a></li>
            <li><a href="#">Reviews</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Support</a></li>
            <li><a href="#">News</a></li>
        </ul>
    </div>

</div>