Menu icon Foundation
Sticky title bar disappears

Hello, I'm trying to build  sticky title bar which triggers off-canvas menu for screens less than 1024px. Everything works fine with exception when user scrolls page down, clicks hamburger icon, closes menu and continues to scroll - title bar disappears. Following is html snippet that I'm using and screenshot. Thank you.

<div data-sticky-container>
<div class="sticky" data-sticky data-options="marginTop:0;" style="width:100%">
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="large">
<div class="title-bar-left"> 
  <button class="menu-icon" type="button" data-toggle="mobile-menu"></button>
  <div class="title-bar-title">Test Menu</div>
	</div>
	
<div class="title-bar-right">
<a href="/contact-us/">Contact 1</a>	
</div>
</div>
</div>
</div>


<!--title bar end-->
 
<!--mobile menu -->
<div class="off-canvas position-left" id="mobile-menu" data-off-canvas >
<div> <button class="close-button" aria-label="Close menu" type="button" data-close>
      <span aria-hidden="true">&times;</span>
	</button></div>
	
	<ul class="vertical menu">
  <li>
    <a href="#">One</a>
    <ul class="nested vertical menu">
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
      <li><a href="#">Four</a></li>
    </ul>
  </li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

</div>
<!-- mobile menu end-->   

 

 

 

 

 

 

 

 

stickytitle bar

Hello, I'm trying to build  sticky title bar which triggers off-canvas menu for screens less than 1024px. Everything works fine with exception when user scrolls page down, clicks hamburger icon, closes menu and continues to scroll - title bar disappears. Following is html snippet that I'm using and screenshot. Thank you.

<div data-sticky-container>
<div class="sticky" data-sticky data-options="marginTop:0;" style="width:100%">
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="large">
<div class="title-bar-left"> 
  <button class="menu-icon" type="button" data-toggle="mobile-menu"></button>
  <div class="title-bar-title">Test Menu</div>
	</div>
	
<div class="title-bar-right">
<a href="/contact-us/">Contact 1</a>	
</div>
</div>
</div>
</div>


<!--title bar end-->
 
<!--mobile menu -->
<div class="off-canvas position-left" id="mobile-menu" data-off-canvas >
<div> <button class="close-button" aria-label="Close menu" type="button" data-close>
      <span aria-hidden="true">&times;</span>
	</button></div>
	
	<ul class="vertical menu">
  <li>
    <a href="#">One</a>
    <ul class="nested vertical menu">
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
      <li><a href="#">Four</a></li>
    </ul>
  </li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

</div>
<!-- mobile menu end-->