angular, angular-snap.js, toggle button click hide/show behavior should not effect header and menu

Question

I am using angular-snap.js for my vertical slider. The problem I am facing is that the snap-content and snap-drawer Toggle buttons are appearing and functioning from the top of a page (even above the header and menu). I would like this snap-drwaer and snap-content should appear below the menu bar and when I click toggle button it should not cause drag effect on header and menu part. Can any one suggest me, how to achieve this with angular-snap.js? Please find the plunker at http://plnkr.co/edit/usbx8yP1fXMJleR3iqZ8?p=preview. The following snap-drawer and snap-content should appear and function below menu bar only,the toggle button should not cause header and menu to be hidden/showon toggle button click. The header and menu should always remain as it is without getting effected with the drag behavior of snap-drawer and snap-content.

    <snap-drawer>
    <button snap-toggle>Another Toggle Button</button>
    </snap-drawer>

    <snap-content snap-options="{tapToClose:false}">
    <button snap-toggle>Toggle</button>   
    </snap-content>

Please let me know, if I need to make any further clarification to make my question clear?

Answer 1

I'm having the same problem and the solution I came up with was to set the header as a fixed element.

You can see the code here http://plnkr.co/edit/brN1fNbPtm3Ad0pP4zKG?p=preview

<div class="wrapper" style="position:fixed;z-index:100;top:80px;">
...
<snap-drawer style="top:150px">
...
<snap-content style="top:150px" snap-options="{tapToClose:false}">

The css changes were made straight on the html file so it will be easier for you to check what I changed.

Not the perfect solution so if somebody comes up with a better one, please share.