title: Issues with fixed header, footer and side bar on ipad / iphone
body: <p>I'm in the process of developing a new website for a local club.</p>
  
  <p>I've created the main webpage and have a fixed header, footer and side bar, the content is in a scrolling element. The page looks perfect on my MacBook and in various browsers. When I look at the page on my iPhone or iPad the page looks as it should until I zoom the page and then the fixed side bar is no longer fixed. </p>
  
  <p>If anyone has any clues as to what I'm doing wrong I'd be very grateful as this is driving me mad.</p>
  
  <p>The test page can be viewed at <a href="http://tawvelo.org/new/home.html" rel="nofollow noreferrer">http://tawvelo.org/new/home.html</a>.</p>
  
  <p>I've attached a couple of photos which will hopefully show the issue.</p>
  
  <p><img src="https://i.stack.imgur.com/BkPz3.png" alt="Photo of how page should look"></p>
  
  <p><img src="https://i.stack.imgur.com/lM5H1.png" alt="Photo of how page looks with iPhone / iPad zoom"></p>