Menu icon Foundation
OffCanvas Menu F6

Just been working in Wordpress with Foundation 6 and i am building a menu with the off-canvas for mobile.
But i seem to have a problem where the content isnt loading into the off-screen menu, below is the code im using, am i putting things in the wrong place?
The reason for the outer divs (dragoncove_mobile_menu) is i have media queries to display different menus at different sizes. Which i will list below although i've tried without the queries and there was no change.

Thanks

<div id="dragoncove_mobile-menu">
    <div class="off-canvas-wrapper">
	    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
	    	<!-- Create off canvas menu -->
	      	<div class="off-canvas position-left" id="offCanvas" data-off-canvas></div>
			<!-- Content -->
	      	<div class="off-canvas-content" data-off-canvas-content>
	      		<?php dragoncove_mobile_slot_1(); ?>
	      	</div>
	    </div>

	    <!-- Button Toggle -->
		<button type="button" class="dragoncove_mobile_button" data-toggle="offCanvas">Open Menu</button>

	 </div>
</div>
            
<style> 

.dragoncove_mobile_button {background: none; border: 2px solid #fff; border-radius: 5px; color: #fff; padding:10px;}

/* Small only */
@media screen and (max-width: 39.9375em) {
    #dragoncove_desktop-menu {display: none;}
	#dragoncove_mobile-menu {display: inline-block;}
}

/* Medium and up */
@media screen and (min-width: 40em) {
	#dragoncove_desktop-menu {display: inline-block;}
	#dragoncove_mobile-menu {display: none;}
}
</style>        

<!-- Menu's are registered like this -->
// Dragon Cove Mobile Menu Slot 1
function dragoncove_mobile_slot_1() {
     wp_nav_menu(array(
        'container' => false,                           // Remove nav container
        'menu_class' => 'vertical menu',       // Adding custom nav class
        'items_wrap' => '<ul id="%1$s" class="%2$s" data-responsive-menu="accordion medium-dropdown">%3$s</ul>',
        'theme_location' => 'dc_mobile_menu_slot1',                 // Where it's located in the theme
        'depth' => 5,                                   // Limit the depth of the nav
        'fallback_cb' => false,                         // Fallback function (see below)
        'walker' => new Topbar_Menu_Walker()
    ));
}

PHPwordpressfoundation sitesfoundation 6

Just been working in Wordpress with Foundation 6 and i am building a menu with the off-canvas for mobile.
But i seem to have a problem where the content isnt loading into the off-screen menu, below is the code im using, am i putting things in the wrong place?
The reason for the outer divs (dragoncove_mobile_menu) is i have media queries to display different menus at different sizes. Which i will list below although i've tried without the queries and there was no change.

Thanks

<div id="dragoncove_mobile-menu">
    <div class="off-canvas-wrapper">
	    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
	    	<!-- Create off canvas menu -->
	      	<div class="off-canvas position-left" id="offCanvas" data-off-canvas></div>
			<!-- Content -->
	      	<div class="off-canvas-content" data-off-canvas-content>
	      		<?php dragoncove_mobile_slot_1(); ?>
	      	</div>
	    </div>

	    <!-- Button Toggle -->
		<button type="button" class="dragoncove_mobile_button" data-toggle="offCanvas">Open Menu</button>

	 </div>
</div>
            
<style> 

.dragoncove_mobile_button {background: none; border: 2px solid #fff; border-radius: 5px; color: #fff; padding:10px;}

/* Small only */
@media screen and (max-width: 39.9375em) {
    #dragoncove_desktop-menu {display: none;}
	#dragoncove_mobile-menu {display: inline-block;}
}

/* Medium and up */
@media screen and (min-width: 40em) {
	#dragoncove_desktop-menu {display: inline-block;}
	#dragoncove_mobile-menu {display: none;}
}
</style>        

<!-- Menu's are registered like this -->
// Dragon Cove Mobile Menu Slot 1
function dragoncove_mobile_slot_1() {
     wp_nav_menu(array(
        'container' => false,                           // Remove nav container
        'menu_class' => 'vertical menu',       // Adding custom nav class
        'items_wrap' => '<ul id="%1$s" class="%2$s" data-responsive-menu="accordion medium-dropdown">%3$s</ul>',
        'theme_location' => 'dc_mobile_menu_slot1',                 // Where it's located in the theme
        'depth' => 5,                                   // Limit the depth of the nav
        'fallback_cb' => false,                         // Fallback function (see below)
        'walker' => new Topbar_Menu_Walker()
    ));
}
Brian Tan almost 4 years ago

The name is a bit misleading. .off-canvas-content is meant for main content (in canvas). It must encapsulate all main content, and must appear after all .off-canvas divs, and immediately followed by the two wrappers closing tags.

If unclear, read the doc page again http://foundation.zurb.com/sites/docs/off-canvas.html#setup

Nick Ritson almost 4 years ago

Is there a way to get this working for WordPress where the layout is controlled using visual composer? I did start hacking a bit of the JointWP F6 version so all the current jquery and files should be loaded.

The thing im trying to wrangle through my head is how the menu would work since i wont be wrapping the entire page in the canvas. What i want is to have this menu type load only for mobile so im currently using media queries to only display this menu on mobile and not desktop.

Code is below for reference.

Screenshot of closed state followed by open state: While its functionally working theres an extra gap on the left. The other issue would be that if the content isnt long enough the menu's height is shorter and so some of the menu would be cut off.
http://prntscr.com/9s1vd4
http://prntscr.com/9s1x90

CODE REFERENCE

<!-- Mobile Only Menu
===================================================================================== -->


    <!-- Create off canvas menu -->
      <div class="off-canvas position-left" id="offCanvas" data-off-canvas>
        <?php dragoncove_mobile_slot_1(); ?>
      </div>

      <!-- CONTENT HERE APPEARS ON MAIN AREA -->
      <div class="off-canvas-content" data-off-canvas-content>
        <h3>here be the in canvas main content</h3>
        <P>
          Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate 
          B2C users after installed base benefits. Dramatically visualize customer directed convergence without 
          revolutionary ROI.
    </P>
    <p>
      Efficiently unleash cross-media information without cross-media value. Quickly maximize timely 
      deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without 
      functional solutions.
    </p>
    <p>
    Completely synergize resource taxing relationships via premier niche markets. Professionally 
    cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling 
    customer service for state of the art customer service.
        </P>
      </div>

  </div>

  <!-- Button Toggle -->
  <button type="button" class="dragoncove_mobile_button" data-toggle="offCanvas">
                 Open Menu
         </button>

<!-- Custom Media Queries
==================================================================================== -->

h3 {color: #222;}
.dragoncove_mobile_button {background: none; border: 2px solid #fff; border-radius: 5px; color: #fff; padding:10px;}

/* Small only /
@media screen and (max-width: 39.9375em) {
#dragoncove_desktop-menu {display: none;}
/
#dragoncove_mobile-menu {display: inline-block;}*/
}

/* Medium and up */
@media screen and (min-width: 40em) {
#dragoncove_desktop-menu {display: inline-block;}
#dragoncove_mobile-menu {display: none;}
}