Off-canvas Responsive Menu on Foundation 6 on WordPress

We use different styles of menu on our website to give users best experience but you should try off-canvas responsive menu by Foundation it’s awesome for your website it makes site looks good in all devices because of responsive styles. On new underscore WordPress themes they are providing primary menu option which converted into toggle on mobile devices. There many css tutorial codes and example over internet but which works for you we don’t know. I think you should give a try to foundation.

Off-canvas menu is very useful for mobile device it’s stylish as well you can show it on desktop mode if you desire to do so. Foundation 6 recently release by zurb with some update and differences from old version but basic is same. Today we try Off-canvas foundation 6 on WordPress and try on mobile devices with desktop or both.

Use below code in header.php on top

<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
	<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
	<?php if ( function_exists( 'jetpack_the_site_logo' ) ) jetpack_the_site_logo(); ?>
		This is Content area put anything 
</div>
<div class="off-canvas-content" data-off-canvas-content>
	<button type="button" class="menu-icon" data-toggle="offCanvas"></button> Menu
	</div>

There are two </DIV> tag are missing add them to portion of website or file which you wanted to displace on opening Off-canvas area. Add them to footer.php file so your Off-canvas menu open till full width.

<?php wp_footer(); ?>
</div></div>

Off-Canvas Responsive Menu on My Website

I just used foundation responsive navigation link code to make it responsive here is full code.

<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<?php if ( function_exists( 'jetpack_the_site_logo' ) ) jetpack_the_site_logo(); ?> // website logo or any thing you want to show
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?> // navigation of you website
</div>
<div class="title-bar" data-responsive-toggle="sand"  data-off-canvas-content data-hide-for="medium">
<span type="button" data-toggle="offCanvas"><ul class="menu"> <li><i class="fa fa-bars"></i><span> Menu</span></li></span>
</div>

now again you need to add two </div> closing div tag into theme before body close.

<?php wp_footer(); ?>
</div></div>

CSS Style Codes for off-canvas

I tried some css codes as well to make is fixed because sticky menu doesn’t works for me you can use them these codes are design as my site change background color as well.

div.off-canvas-wrapper-inner > div.title-bar{
	position: fixed;
	z-index: 9;
	width: 100%;
}

.off-canvas {
    background: #e6e6e6;
}