Menu icon Foundation
Top Bar Unsticks On iOS Form Focus

As the title suggests, the top bar works perfectly until a form input field is clicked, then the top bar looses it's stick.

Any suggestions would be welcome.

My top bar code:

<div class="contain-to-grid sticky">    
  <!-- 'fixed' div wrap : fixes nav bar flickering off on scroll event -->
   <div class="fixed">
    <nav class="top-bar" data-topbar data-options="scrolltop:false">
     ...
   </nav>
  </div>    
</div>
            

         

top barstickyiosforminput

As the title suggests, the top bar works perfectly until a form input field is clicked, then the top bar looses it's stick.

Any suggestions would be welcome.

My top bar code:

<div class="contain-to-grid sticky">    
  <!-- 'fixed' div wrap : fixes nav bar flickering off on scroll event -->
   <div class="fixed">
    <nav class="top-bar" data-topbar data-options="scrolltop:false">
     ...
   </nav>
  </div>    
</div>
            

         
Jamie Brightmore about 5 years ago

Still not found a solution to this so I'm using jQuery to hide the menu on input focus.

However I have the same problem when a user clicks on a Disqus comment form input field. As this is an external iFrame source I cannot target those elements so cannot apply the jQuery fix there.