How to get Susy going with a CSS only toggle navigation

Question

I've tried to apply a Susy grid to my header containing one logo and nav links. But i ran into some real unexpected behaviour i can't explain myself. The HTML looks like the following:

    
    
        
            
                
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                
            
        
        
            
                
                    
                        
                        Menu open and close
                    
                
Point1
Point2
Point3
Point4
Point5
Back to top

.sectionwarp is the class for the Susy container. .logohome hosts the logo (i've placed code for Scott Jehls picturefill there). The nav element contains the menu with 5 menu points as well as the toggler button for the menu as a font icon and a hidden list element for closing the open menu. The CSS only toggle navigation is based on the 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) a {
    @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 a {
    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) a {
        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 is absolute positioned and everything looks fine with the present setup pasted above: Toogle Nav without Susy . Now i've tried simply to put the logo into one column and the togglebutton for smaller viewports and the nav for broader into another. But already in the first step one of the three behaves odd. I've tried around by trying different element hooks as well as switch off position absolute for the toggle element, but nothing helped and i am just confused why Susy acts like it acts and what i've done wrong. ;) I've removed the .logohome with the float:left and the fixed width and replaced it with the 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 as well as .logohome behave as expected on a desktop viewport (Desktop Viewport). But if you take a look on a mobile viewport (Mobile Viewport) the column for .toggler is broader and the position of the toggler icon is in total contrary to its absolute position. If anyone could shed some light onto why the .toggler column and its content behaves like it behaves i would be glad. Thanks in advance Ralf

Miriam Suzanne · Accepted Answer

The absolute position on #togglenav (also known as .navio) pushes that element out past the grid-padding to the edges of the container. You need that padding back in order for any nested elements to line up on the grid. .toggler is also absolutely positioned, and then offset from the right edge. I assume that is to fix the grid-padding problem, but it doesn't work because the element width is relative to a larger container than it should be. In order for Susy to properly calculate the width of an element, it has to be in the proper context.

I think there would be simpler ways to write this entire widget, but given your approach the best option is probably to add absolute positioning on your li:first-child, with $grid-padding for left and right position offsets (and top: 0;). That will get your columns aligned properly.
Your initial layout (pre-susy) has no set width on the .toggler - so it is collapsing to the size of the icon. Once you add Susy, you give it a fairly large set width, so the icon aligns to the left of that width (as you might expect). Try changing the text-align of .toggler or floating the icon itself to the right.
When you use span-columns you are adding floats and margins that are rendered irrelevant by your absolute positioning. Instead, you can just use width: columns(12,18); to get the width. There is also no need for omega in that case.

How to get Susy going with a CSS only toggle navigation

Answers (1)

Related Questions