Menu icon Foundation
Off canvas nav menu issue

Yo Zurb Peeps

Please  can you assit me, please, please. 

Im struggling to get the off canvas reponsive nav working correclty F6, (by the way F5 was so much easier)
I checked out Brian Tan example in the building blocks sample/section,  but when i tried to implement his example it just wont work properly.

I also noticed once I clicked off the hamburger menu and I want to toggle off the main menu, the main menu will still remain there.

In my code I have hero background image. But now the menu seems to go behind my backgroud hero image. 
Is there way around this please help? ie z-index etc...

Your help would be appericated.

  </head>
  <body>
  <div class="off-canvas-wrapper">
  <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
   
  <!-- off-canvas title bar for 'small' screen -->
  <div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
  <div class="title-bar-left">
  <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
  <span class="title-bar-title">Foundation</span>
  </div>
  <div class="title-bar-right">
  <span class="title-bar-title">Login</span>
  <button class="menu-icon" type="button" data-open="offCanvasRight"></button>
  </div>
  </div>
   
  <!-- off-canvas left menu -->
  <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
  <ul class="vertical dropdown menu" data-dropdown-menu>
  <li><a href="left_item_1">Left item 1</a></li>
  <li><a href="left_item_2">Left item 2</a></li>
  <li><a href="left_item_3">Left item 3</a></li>
  </ul>
  </div>
   
  <!-- off-canvas right menu -->
  <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
  <ul class="vertical dropdown menu" data-dropdown-menu>
  <li><a href="right_item_1">Right item 1</a></li>
  <li><a href="right_item_2">Right item 2</a></li>
  <li><a href="right_item_3">Right item 3</a></li>
  </ul>
  </div>
   
  <!-- "wider" top-bar menu for 'medium' and up -->
  <div id="widemenu" class="top-bar">
  <div class="top-bar-left">
  <ul class="dropdown menu" data-dropdown-menu>
  <li class="menu-text">Foundation</li>
  <li class="has-submenu">
  <a href="#">Item 1</a>
  <ul class="menu submenu vertical" data-submenu>
  <li><a href="left_wide_11">Left wide 1</a></li>
  <li><a href="left_wide_12">Left wide 2</a></li>
  <li><a href="left_wide_13">Left wide 3</a></li>
  </ul>
  </li>
  <li class="has-submenu">
  <a href="#">Item 2</a>
  <ul class="menu submenu vertical" data-submenu>
  <li><a href="left_wide_21">Left wide 1</a></li>
  <li><a href="left_wide_22">Left wide 2</a></li>
  <li><a href="left_wide_23">Left wide 3</a></li>
  </ul>
  </li>
  </ul>
  </div>
  </div>
  </div>
  </div>
   
   
   
  <!-- End of Top Bar navigation -->
   
   
  <!-- Begin with hero image-->
  <section class="hero">
  <div class="row">
  <div class="spacerheader">
  <div class="small-12 medium-10 medium-centered columns">
  <div class="row text-center">
  <h1>Join the revolution and Switch to Solar </h1>
  </div>
  </div>
  <div class="row text-center">
  <a href="get_started.html" class="large success button">Get Started &rarr;</a>
  </div>
  </div>
  </div>
  </div>
  </section>
  <!-- End hero image-->
   

Off Canvas Nav

Yo Zurb Peeps

Please  can you assit me, please, please. 

Im struggling to get the off canvas reponsive nav working correclty F6, (by the way F5 was so much easier)
I checked out Brian Tan example in the building blocks sample/section,  but when i tried to implement his example it just wont work properly.

I also noticed once I clicked off the hamburger menu and I want to toggle off the main menu, the main menu will still remain there.

In my code I have hero background image. But now the menu seems to go behind my backgroud hero image. 
Is there way around this please help? ie z-index etc...

Your help would be appericated.

  </head>
  <body>
  <div class="off-canvas-wrapper">
  <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
   
  <!-- off-canvas title bar for 'small' screen -->
  <div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
  <div class="title-bar-left">
  <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
  <span class="title-bar-title">Foundation</span>
  </div>
  <div class="title-bar-right">
  <span class="title-bar-title">Login</span>
  <button class="menu-icon" type="button" data-open="offCanvasRight"></button>
  </div>
  </div>
   
  <!-- off-canvas left menu -->
  <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
  <ul class="vertical dropdown menu" data-dropdown-menu>
  <li><a href="left_item_1">Left item 1</a></li>
  <li><a href="left_item_2">Left item 2</a></li>
  <li><a href="left_item_3">Left item 3</a></li>
  </ul>
  </div>
   
  <!-- off-canvas right menu -->
  <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
  <ul class="vertical dropdown menu" data-dropdown-menu>
  <li><a href="right_item_1">Right item 1</a></li>
  <li><a href="right_item_2">Right item 2</a></li>
  <li><a href="right_item_3">Right item 3</a></li>
  </ul>
  </div>
   
  <!-- "wider" top-bar menu for 'medium' and up -->
  <div id="widemenu" class="top-bar">
  <div class="top-bar-left">
  <ul class="dropdown menu" data-dropdown-menu>
  <li class="menu-text">Foundation</li>
  <li class="has-submenu">
  <a href="#">Item 1</a>
  <ul class="menu submenu vertical" data-submenu>
  <li><a href="left_wide_11">Left wide 1</a></li>
  <li><a href="left_wide_12">Left wide 2</a></li>
  <li><a href="left_wide_13">Left wide 3</a></li>
  </ul>
  </li>
  <li class="has-submenu">
  <a href="#">Item 2</a>
  <ul class="menu submenu vertical" data-submenu>
  <li><a href="left_wide_21">Left wide 1</a></li>
  <li><a href="left_wide_22">Left wide 2</a></li>
  <li><a href="left_wide_23">Left wide 3</a></li>
  </ul>
  </li>
  </ul>
  </div>
  </div>
  </div>
  </div>
   
   
   
  <!-- End of Top Bar navigation -->
   
   
  <!-- Begin with hero image-->
  <section class="hero">
  <div class="row">
  <div class="spacerheader">
  <div class="small-12 medium-10 medium-centered columns">
  <div class="row text-center">
  <h1>Join the revolution and Switch to Solar </h1>
  </div>
  </div>
  <div class="row text-center">
  <a href="get_started.html" class="large success button">Get Started &rarr;</a>
  </div>
  </div>
  </div>
  </div>
  </section>
  <!-- End hero image-->
   
david over 3 years ago

Hi Zurb Peeps

Just to folllow up on this query, I noticed that the submenu on any of the F6 navs.

The submenu's just dont click-thru to a relevant URL but only work when you right-click on the menu.

Would anybody know of a workaround or solution. ?

Thanks in advance Zurb Peeps.

sub menu click-thru

 

david over 3 years ago

Hi Jamie

 

Thanks for this i will give it a try 

Jamie Edwards over 3 years ago

I think you might have missed your main off canvas content wrapper;

<div class="off-canvas-content" data-off-canvas-content>
                {{> body}}
            </div>