Fixed Responsive Top Nav / Off Canvas Nav with Sin

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

Fiddle 2: working but with multiple nav elments

Okay so, I have been racking my brain trying to develop and elegant solution for the following:

1) Make a responsive, fixed navigation that switches from stretching across the top to sliding out of the side on smaller screen sizes (ala the Facebook app)

2) I'd like to use the same DOM element for the navigation, rather than have two separate but identical elements

I was able to accomplish this using CSS translations, except for the fact that translations remove the fixed property of the nav (see fiddle 1).

The Fiddle 1 solution uses CSS translations like so:

-webkit-transform: translate3d(250px, 0, 0);
-moz-transform: translate3d(250px, 0, 0);
-o-transform: translate3d(250px, 0, 0);
transform: translate3d(250px, 0, 0);

While Fiddle 2 acts on the left and right margins of the content:

margin-right: -250px;
margin-left: 250px;

I'd like to somehow find a way to use just one DOM element for both elegance and so nav-related plugins will still work (like scrollspy)

Answer 1

One solution would be to give page position:absolute and change the left positioning instead transforming it.

.page {
    transition:.3s ease-in-out;
    position:absolute;
    left:0px;
    top:0px;
}    
.page.navigating {
    left:250px;
}
.page.navigating .top-bar .top-bar-section {
    left:0px;
}

Demo here

EDIT

To make the nave be horizontal on small screen, you'll need to use @media queries. Something like this approximates the result you want

@media all and (max-width: 310px) {
  .left li {
      display:inline-block;
  }
  .left li a {
  }
  section.top-bar-section {
      width:auto;
  }
  .left li:nth-child(odd) {
      display:none;
  }
  .left li:nth-child(even) a {
      display:inline-block;
      width:auto;
      padding:5px;
      font-size: 50%;
      background:black;
  }
  .page.navigating .top-bar .top-bar-section {
      left:40px;
  }
  .page.navigating {
      left:0px;
  }
  .name h1 {
      float:right;
      font-size:50%;
  }
}

Updated Demo

Answer 2

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