Menu icon Foundation

Developer

My Posts

No Content

My Comments

Ben Lamb commented on Ninad Chande's post over 5 years

Thanks Randy - great stuff.

In case it helps anyone else: it seems Randy's code needs to be executed after foundation.min.js has been loaded, but before calling $(document).foundation();. Preferably within IE8-and-less conditional comments, and preferably in an external file to reduce bloat for most users:

<script src="path/to/foundation.min.js"></script>
<!--[if lt IE 9]>
<script src="path/to/randys/code.js" type="text/javascript"></script>
<![endif]-->
<script>$(document).foundation();</script>

Ben Lamb commented on Alex Wright's post almost 6 years

Hi,

I hit this limitation as well. One solution seems to be the use of media queries to specify the different column sizes - I have not tested this properly but seems to work:

header { @include grid-row();

    a, nav {
        @media #{$small-only} {
            @include grid-column(12);
        }
    }

    a { @include grid-column(8); }

    nav { @include grid-column(4); }
}

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Ninad Chande's post over 5 years

Thanks Randy - great stuff.

In case it helps anyone else: it seems Randy's code needs to be executed after foundation.min.js has been loaded, but before calling $(document).foundation();. Preferably within IE8-and-less conditional comments, and preferably in an external file to reduce bloat for most users:

<script src="path/to/foundation.min.js"></script>
<!--[if lt IE 9]>
<script src="path/to/randys/code.js" type="text/javascript"></script>
<![endif]-->
<script>$(document).foundation();</script>

You commented on Alex Wright's post almost 6 years

Hi,

I hit this limitation as well. One solution seems to be the use of media queries to specify the different column sizes - I have not tested this properly but seems to work:

header { @include grid-row();

    a, nav {
        @media #{$small-only} {
            @include grid-column(12);
        }
    }

    a { @include grid-column(8); }

    nav { @include grid-column(4); }
}

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content