Menu icon Foundation
Foundation topbar not auto-collapsed for widths smaller than breakpoint

I am using https://gist.github.com/mirzap/4046020 to make WordPress play nice with Foundation 5, but my topbar is being troublesome. It acts fine after the breakpoint but before it, it displays the entire menu automatically despite me not clicking anything. When I do click the menu icon, nothing happens. I've read countless threads here and on other sites, but nothing seems to exactly match my issue, and if it was similar, the proposed solutions didn't work for me. Might anyone have a clue about what I can do?

Edit: I found that my theme.js and foundation.min.js do not load on all pages. For example, I'm trying to load http://kenwheeler.github.io/slick/ through a CDN but the slider does not appear. Where am I going wrong in calling the JS and loading the settings?

    	<header>
			<div class='fixed top-bar-container'>
				<nav data-topbar class="top-bar bottom-bar">
					<ul class="title-area">
					    <li class="name">
					    	<a href="<?php echo home_url(); ?>"><img src='http://localhost...pic1.png'/></a>
					    </li>
					    <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
					</ul>
					
					<section class="top-bar-section">
					<!-- Right Nav Section -->	
					<ul class="right">
						<?php $args = array('menu' => 'main-menu'); wp_nav_menu($args); ?>
					</ul>
					</section>
				</nav>
			</div>
		</header>     

//THEME.JS FILE

jQuery(document).ready(function($) {

    // Slick Slider on Homepage
	$('.autoplay').slick({
	  slidesToShow: 1,
	  slidesToScroll: 1,
	  autoplay: true,
	  autoplaySpeed: 2000,
	});

    // Call to load Foundation
	$(document).foundation({
	  topbar: {is_hover: false}
	});
});

wordpresstopbarcollapse

I am using https://gist.github.com/mirzap/4046020 to make WordPress play nice with Foundation 5, but my topbar is being troublesome. It acts fine after the breakpoint but before it, it displays the entire menu automatically despite me not clicking anything. When I do click the menu icon, nothing happens. I've read countless threads here and on other sites, but nothing seems to exactly match my issue, and if it was similar, the proposed solutions didn't work for me. Might anyone have a clue about what I can do?

Edit: I found that my theme.js and foundation.min.js do not load on all pages. For example, I'm trying to load http://kenwheeler.github.io/slick/ through a CDN but the slider does not appear. Where am I going wrong in calling the JS and loading the settings?

    	<header>
			<div class='fixed top-bar-container'>
				<nav data-topbar class="top-bar bottom-bar">
					<ul class="title-area">
					    <li class="name">
					    	<a href="<?php echo home_url(); ?>"><img src='http://localhost...pic1.png'/></a>
					    </li>
					    <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
					</ul>
					
					<section class="top-bar-section">
					<!-- Right Nav Section -->	
					<ul class="right">
						<?php $args = array('menu' => 'main-menu'); wp_nav_menu($args); ?>
					</ul>
					</section>
				</nav>
			</div>
		</header>     

//THEME.JS FILE

jQuery(document).ready(function($) {

    // Slick Slider on Homepage
	$('.autoplay').slick({
	  slidesToShow: 1,
	  slidesToScroll: 1,
	  autoplay: true,
	  autoplaySpeed: 2000,
	});

    // Call to load Foundation
	$(document).foundation({
	  topbar: {is_hover: false}
	});
});