Menu icon Foundation
Interchange conflicting with Reveal Modal

I'm using Interchange for Off-canvas menu http://zurb.com/university/lessons/serve-users-only-the-files-they-need where my desktop and tablet size menus are the top-bar, but then go to Off-canvas for small.

I'm also using Interchange for Slick Slider to swap out image sizes.

I've got both working but the creation of a second unique swap ID for Slick Slider is causing Reveal Modal to stop working completely, regardless of browser width. When I take out the second ID, Reveal Modal works again, so this is how I know that the second ID is causing a conflict. If I use the same swap ID for both slick slider and off-canvas then the menus go buggy, so this is why I used unique IDs for each of them.

It is also causing the class="dropdown" to not go down, you have to click on the main menu link for it to dropdown.

See for some background reference to this issue: http://foundation.zurb.com/forum/posts/24972-interchange-and-slick-slider

I've also included some current code below:

<!-- navigation -->
    <div class="off-canvas-wrap" data-offcanvas>
  		<div class="inner-wrap">
  		  <!-- this is where the magic happens -->
			<div id="menuswap" data-interchange="[partials/mobile-menu.html, (small)], [partials/tablet-menu.html, (medium)], [partials/desktop-menu.html, (large)]">
			</div>
<!-- /navigation -->

<!-- content -->
		<section>
			<div class="row">
				<div class="large-12 columns homeslider">			
					<div id="imageswap" class="slider">
						<img data-interchange="[images/coffee-small.jpg, (small)], [images/coffee-medium.jpg, (medium)], [images/coffee-large.jpg, (large)]">
						<img data-interchange="[images/apples-small.jpg, (small)], [images/apples-medium.jpg, (medium)], [images/apples-large.jpg, (large)]">
						<img data-interchange="[images/horizon-small.jpg, (small)], [images/horizon-medium.jpg, (medium)], [images/horizon-large.jpg, (large)]">
					</div>
					<a href="#"><p class="text-center morestuff">MORE STUFF DOWN HERE &nbsp;&nbsp;<i class="fa fa-hand-o-down"></i></p></a>
				</div>
			</div>
		</section>

    <script type="text/javascript">
    	$(document).foundation();
		$("#menuswap", "#imageswap").on("replace", function() {
		$(document).foundation();
		});
    </script>
    
    
<!-- Below is the partial for mobile-menu -->

<!-- Mobile Nav -->
    <nav class="tab-bar">
      <section class="right-small">
        <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
      </section>

      <section class="middle tab-bar-section">
        <h1 class="title"><a href="#"><img src="images/logo-small.png"></a></h1>
      </section>
      
      <section class="left-small">
          <a href="#" data-reveal-id="myModal"><i class="fa fa-envelope-o fa-lg"></i></a>
      </section>
    </nav>

    <aside class="right-off-canvas-menu">
      <ul class="off-canvas-list">
	    <li class="has-dropdown">
          <a href="#">PAGE 1</a>
          <ul class="dropdown">
            <li><a href="#">First link in dropdown</a></li>
          </ul>
        </li>
        <li class="has-dropdown">
          <a href="#">PAGE 2</a>
          <ul class="dropdown">
            <li><a href="#">First link in dropdown</a></li>
          </ul>
        </li>
        <li class="has-dropdown">
          <a href="#">PAGE 3</a>
          <ul class="dropdown">
            <li><a href="#">First link in dropdown</a></li>
        </li>
        <li><a href="#">PAGE 4</a></li>
        <li><a href="#">PAGE 5</a></li>

		<div id="myModal" class="reveal-modal small" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
			<h2 id="modalTitle">STAY IN TOUCH</h2>
			<p class="lead">Sign up for our newsletter and we’ll keep you updated on the latest news & specials.</p>
			<form data-abide>
			  <div class="row">
			    <div class="large-12 columns name-field">
			      <label>Name *
			        <input type="text" required placeholder="large-12.columns" />
			      </label>
			      <small class="error">Your name is required.</small>
			    </div>
			  </div>
			  <div class="row">
			    <div class="large-12 columns email-field">
			      <label>Email *
			        <input type="email" required placeholder="large-12.columns" />
			      </label>
			      <small class="error">A valid email address is required.</small>
			    </div>
			  </div>
			  <div class="row">
			    <div class="large-12 columns">
			      <label>Postal Code
			        <input type="email" placeholder="large-12.columns" />
			      </label>
			    </div>
			  </div>
			  <div class="row">
				<div class="large-12 columns contact-checkbox">
				  <label>I would like to hear about:</label>
			      <p><input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label></p>
			      <p><input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label></p>
			      <p class="last"><input id="checkbox3" type="checkbox"><label for="checkbox3">Checkbox 3</label></p>
			    </div>
			  </div>
			  <div class="row">
			    <div class="large-12 columns text-right">
			        <button type="submit">Submit</button>
			    </div>
			  </div>
			</form>  
			<a class="close-reveal-modal" aria-label="Close">&#215;</a>
		</div>
      </ul>
    </aside>

    </section>
  </nav>
    
    
            

         

interchangeSlick Slideroff-canvasreveal-modal

I'm using Interchange for Off-canvas menu http://zurb.com/university/lessons/serve-users-only-the-files-they-need where my desktop and tablet size menus are the top-bar, but then go to Off-canvas for small.

I'm also using Interchange for Slick Slider to swap out image sizes.

I've got both working but the creation of a second unique swap ID for Slick Slider is causing Reveal Modal to stop working completely, regardless of browser width. When I take out the second ID, Reveal Modal works again, so this is how I know that the second ID is causing a conflict. If I use the same swap ID for both slick slider and off-canvas then the menus go buggy, so this is why I used unique IDs for each of them.

It is also causing the class="dropdown" to not go down, you have to click on the main menu link for it to dropdown.

See for some background reference to this issue: http://foundation.zurb.com/forum/posts/24972-interchange-and-slick-slider

I've also included some current code below:

<!-- navigation -->
    <div class="off-canvas-wrap" data-offcanvas>
  		<div class="inner-wrap">
  		  <!-- this is where the magic happens -->
			<div id="menuswap" data-interchange="[partials/mobile-menu.html, (small)], [partials/tablet-menu.html, (medium)], [partials/desktop-menu.html, (large)]">
			</div>
<!-- /navigation -->

<!-- content -->
		<section>
			<div class="row">
				<div class="large-12 columns homeslider">			
					<div id="imageswap" class="slider">
						<img data-interchange="[images/coffee-small.jpg, (small)], [images/coffee-medium.jpg, (medium)], [images/coffee-large.jpg, (large)]">
						<img data-interchange="[images/apples-small.jpg, (small)], [images/apples-medium.jpg, (medium)], [images/apples-large.jpg, (large)]">
						<img data-interchange="[images/horizon-small.jpg, (small)], [images/horizon-medium.jpg, (medium)], [images/horizon-large.jpg, (large)]">
					</div>
					<a href="#"><p class="text-center morestuff">MORE STUFF DOWN HERE &nbsp;&nbsp;<i class="fa fa-hand-o-down"></i></p></a>
				</div>
			</div>
		</section>

    <script type="text/javascript">
    	$(document).foundation();
		$("#menuswap", "#imageswap").on("replace", function() {
		$(document).foundation();
		});
    </script>
    
    
<!-- Below is the partial for mobile-menu -->

<!-- Mobile Nav -->
    <nav class="tab-bar">
      <section class="right-small">
        <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
      </section>

      <section class="middle tab-bar-section">
        <h1 class="title"><a href="#"><img src="images/logo-small.png"></a></h1>
      </section>
      
      <section class="left-small">
          <a href="#" data-reveal-id="myModal"><i class="fa fa-envelope-o fa-lg"></i></a>
      </section>
    </nav>

    <aside class="right-off-canvas-menu">
      <ul class="off-canvas-list">
	    <li class="has-dropdown">
          <a href="#">PAGE 1</a>
          <ul class="dropdown">
            <li><a href="#">First link in dropdown</a></li>
          </ul>
        </li>
        <li class="has-dropdown">
          <a href="#">PAGE 2</a>
          <ul class="dropdown">
            <li><a href="#">First link in dropdown</a></li>
          </ul>
        </li>
        <li class="has-dropdown">
          <a href="#">PAGE 3</a>
          <ul class="dropdown">
            <li><a href="#">First link in dropdown</a></li>
        </li>
        <li><a href="#">PAGE 4</a></li>
        <li><a href="#">PAGE 5</a></li>

		<div id="myModal" class="reveal-modal small" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
			<h2 id="modalTitle">STAY IN TOUCH</h2>
			<p class="lead">Sign up for our newsletter and we’ll keep you updated on the latest news & specials.</p>
			<form data-abide>
			  <div class="row">
			    <div class="large-12 columns name-field">
			      <label>Name *
			        <input type="text" required placeholder="large-12.columns" />
			      </label>
			      <small class="error">Your name is required.</small>
			    </div>
			  </div>
			  <div class="row">
			    <div class="large-12 columns email-field">
			      <label>Email *
			        <input type="email" required placeholder="large-12.columns" />
			      </label>
			      <small class="error">A valid email address is required.</small>
			    </div>
			  </div>
			  <div class="row">
			    <div class="large-12 columns">
			      <label>Postal Code
			        <input type="email" placeholder="large-12.columns" />
			      </label>
			    </div>
			  </div>
			  <div class="row">
				<div class="large-12 columns contact-checkbox">
				  <label>I would like to hear about:</label>
			      <p><input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label></p>
			      <p><input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label></p>
			      <p class="last"><input id="checkbox3" type="checkbox"><label for="checkbox3">Checkbox 3</label></p>
			    </div>
			  </div>
			  <div class="row">
			    <div class="large-12 columns text-right">
			        <button type="submit">Submit</button>
			    </div>
			  </div>
			</form>  
			<a class="close-reveal-modal" aria-label="Close">&#215;</a>
		</div>
      </ul>
    </aside>

    </section>
  </nav>