css3 - How to get Susy going with a CSS only toggle navigation -

i've tried apply susy grid header containing 1 logo , nav links. ran real unexpected behaviour can't explain myself. html looks following:

    <header id="top" role="banner" class="headerstyle headerline">     <div class="sectionwrap">         <div itemscope itemtype="http://schema.org/organization">             <a class="logohome" href="#gohome" title="logo">                 <span itemprop="logo" class="sitelogo" data-picture data-alt="logo">                     <span data-src="img/logo.png"></span>                     <span data-src="img/logo_x2.png"      data-media="(min-device-pixel-ratio: 2.0)"></span>                     <!--[if (lt ie 9) & (!iemobile)]>                         <span data-src="img/logo.png"></span>                     <![endif]-->                     <span data-src="img/logo400.png"     data-media="(min-width: 350px)"></span>                     <span data-src="img/logo400_x2.png"     data-media="(min-width: 350px) , (min-device-pixel-ratio: 2.0)"></span>                     <span data-src="img/logo800.png"      data-media="(min-width: 800px)"></span>                     <span data-src="img/logo800_x2.png"      data-media="(min-width: 800px) , (min-device-pixel-ratio: 2.0)"></span>                     <span data-src="img/logo1000.png" data-media="(min-width: 1000px)"></span>                     <span data-src="img/logo1000_x2.png" data-media="(min-width: 1000px) , (min-device-pixel-ratio: 2.0)"></span>                     <noscript>                         <img itemprop="logo" class="sitlogo" src="img/logo.png" alt="logo">                     </noscript>                 </span>             </a>         </div>         <nav role="navigation">             <ul class="navio" id="togglenav" tabindex="0">                 <li>                     <a href="#togglenav" class="icon-alone toggler" title="menu">                         <span aria-hidden="true" data-icon="t"></span>                         <span class="screen-reader-text">menu open , close</span>                     </a>                 </li><!--                 --><li><a class="navessentials" href="#pointone">point1</a></li><!--                 --><li><a class="navessentials" href="#pointtwo">point2</a></li><!--                 --><li><a class="navessentials" href="#pointthree">point3</a></li><!--                 --><li><a class="navessentials" href="#pointfour">point4</a></li><!--                 --><li><a class="navessentials" href="#pointfive">point5</a></li><!--                 --><li class="togglereset" aria-hidden="true"><a href="#top">back top</a></li>             </ul>         </nav>     </div> </header> 

.sectionwarp class susy container. .logohome hosts logo (i've placed code scott jehls picturefill there). nav element contains menu 5 menu points toggler button menu font icon , hidden list element closing open menu. css toggle navigation based on following article toggle navigation

.logohome{     float:left;     width:17em; }  .toggler{     position: absolute;     z-index: 1001;     top: 0.55em;     right: 0.5em;     text-decoration: none;     cursor: pointer;     font-size: 2.75em; //3em }  #togglenav li:not(:first-child) {     @include tran(color, $navtext);     text-decoration: none;     @include tran(bg, $fixedheader, 0.95);     display: inline-block;     height: 3em;     line-height: 1.5em;     padding: .8em;     border-bottom: 1px solid orange;     width: 100%; }  body:not(:target) #togglenav {     margin: 0;     padding-top: 5.3em;     position: absolute;     top: 0;     right: 0;     left: 0;     z-index: 1000; } body:not(:target) #togglenav li:not(:first-child) {     width: 100%;     height: 0;     line-height: 0;     overflow: hidden;     -webkit-transition: height 0.25s;     -moz-transition: height 0.25s;     -o-transition: height 0.25s;     transition: height 0.25s; } body:not(:target) #togglenav:target {     z-index: 1001; } body:not(:target) #togglenav:target .toggler {     z-index:-1; }  body:not(:target) #togglenav:target li:not(:first-child) {     height: 3em;     line-height: auto;     overflow: visible;     -webkit-transition: height 0.25s;     -moz-transition: height 0.25s;     -o-transition: height 0.25s;     transition: height 0.25s; } body:not(:target) #togglenav:target .togglereset {     height: 0;     line-height: 0; } body:not(:target) #togglenav:target .togglereset {     width: 100%;     background-color: transparent;     border: none;     height: auto;     position: absolute;     top: -101em;     bottom: -101em;     left: 0;     right: 0;     text-indent: -999em;     direction:ltr;     z-index: -1; }  @include breakpoint($menutogglerswitch) {     .toggler {         display: none;     }     body:not(:target) #togglenav {         padding-top: 0;         float:right;         position:relative;         top:0.8em;     }     body:not(:target) #togglenav li:not(:first-child):not(:last-child) {         display: inline;         border: none;     }     body:not(:target) #togglenav li:not(:first-child) {         line-height: 1.5em;         height: 2em;         width: auto;         border: none;         background-color: transparent;         padding: 0;         margin-left: 1.5em;         &:hover{             padding-bottom: 0;             margin-bottom: 0;             border-bottom:5px $navunderline solid;         }     }     body:not(:target) #togglenav .togglereset {         display: none;     } } 

the toggle button absolute positioned , looks fine present setup pasted above: toogle nav without susy . i've tried put logo 1 column , togglebutton smaller viewports , nav broader another. in first step 1 of 3 behaves odd. i've tried around trying different element hooks switch off position absolute toggle element, nothing helped , confused why susy acts acts , i've done wrong. ;) i've removed .logohome float:left , fixed width , replaced following:

.logohome {         @include span-columns(6,18);         outline: 1px solid green; } .toggler {     @include breakpoint(1px 899px) {         @include span-columns(12 omega,18);         outline:1px solid red;     } } .navio{     @include breakpoint(900px) {         @include span-columns(12 omega,18);         outline:1px solid yellow;     } } 

.navio .logohome behave expected on desktop viewport (desktop viewport). if take on mobile viewport (mobile viewport) column .toggler broader , position of toggler icon in total contrary absolute position. if shed light onto why .toggler column , content behaves behaves glad. in advance ralf

1. the absolute position on #togglenav (also known .navio) pushes element out past grid-padding edges of container. need padding in order nested elements line on grid. .toggler absolutely positioned, , offset right edge. assume fix grid-padding problem, doesn't work because element width relative larger container should be. in order susy calculate width of element, has in proper context.

   i think there simpler ways write entire widget, given approach best option add absolute positioning on li:first-child, $grid-padding left , right position offsets (and top: 0;). columns aligned properly.

2. your initial layout (pre-susy) has no set width on .toggler - collapsing size of icon. once add susy, give large set width, icon aligns left of width (as might expect). try changing text-align of .toggler or floating icon right.

3. when use span-columns adding floats , margins rendered irrelevant absolute positioning. instead, can use width: columns(12,18); width. there no need omega in case.