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

Answer 2

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