Long tried to create a responsive navigation. But still turned out. But I'm still not sure I did the right thing. Because I passed a value of 0 in the span. Or so it is still possible to do? It works :)
$big: (columns: 24, gutters: 1/2,math: fluid,gutter-position: split )
@include susy-breakpoint(700px, $big)
.nav-item // is ui>li.nav-item
@include span(0 border-box)
No, this is not a proper way to use Susy. If you look at the output, you will see that you get width: -1.38889%; which is not valid CSS. It works because browsers ignore invalid code - but it's not a good idea, and it's not a meaningful use of Susy.
The only grid-output you need is gutters, so that's all you should ask Susy for. The rest you can do with plain css:
.nav-item {
@include gutters;
box-sizing: border-box;
float: left;
}