Fixed Responsive Top Nav / Off Canvas Nav with Single DOM Element

Question

Let\'s get the fiddles out of the way first (built on the Foundation responsive framework):

Fiddle 1: one nav element, but becomes unfixed when side nav slides out

Answer 1

I would suggest moving the element, outside of the div#page. That way any styling you put on the page won't affect it (including the translations), and you are free to style your nav list as needed.

http://jsfiddle.net/mKAtM/3/

This was just a quick test, i've moved the nav out of the div as suggested and added styles along the lines of:

.top-bar {
    z-index:1000;
}
.top-bar.expanded{
    -webkit-transform: translate3d(250px, 0, 0);
    -moz-transform: translate3d(250px, 0, 0);
    -o-transform: translate3d(250px, 0, 0);
    transform: translate3d(250px, 0, 0);
    overflow:visible;
}

(Think the overflow:visible is a different issue)

Obviously you need to add your transitions etc. and the translates should be in a class, but hope this is a step in the right direction

EDIT

updated fiddle to fix animation: http://jsfiddle.net/mKAtM/8/

css needs some tidying up, much easier to with your less/scss if you are using