Menu icon Foundation

Designer | Hereford, UK

Proud Yetinaut!

My Posts

No Content

My Comments

Brett Mason commented on JD Fillmore's post about 3 years

Awesome we are definitely getting there. So if that's working then that must mean that the sticky classes are missing from your stylesheet. You need to check through your own version and see if they are there or not.

Brett Mason commented on JD Fillmore's post about 3 years

You could also try and load the Foundation JS from here: http://cdn.foundation5.zurb.com/foundation.js
If those versions of the JS/CSS dont work then I'm running out of ideas!

Brett Mason commented on JD Fillmore's post about 3 years

Ok so thats a good starting point.
I've just setup a really quick Codepen using your nav code plus some latin just to pad it out: http://codepen.io/brettsmason/pen/ORQkaO
As you can see it works OK. I did notice you had a sticky class on the top-bar element - try removing that and see what happens. If no luck try and load your Foundation css from here: http://cdn.foundation5.zurb.com/foundation.css just to test to see if that works.

Brett Mason commented on JD Fillmore's post about 3 years

So I had a look again but there is still an error in the console:
Uncaught TypeError: a.indexOf is not a function
This is related to jQuery that you have loaded which seems to be version 3, which I am not sure is supported by V5. There might be an issue with which version the Bower package is pulling in.
Could you try loading jQuery from here: https://code.jquery.com/jquery-2.2.4.min.js
So change <script src="bower_components/jquery/dist/jquery.min.js"></script>
to <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

Brett Mason commented on JD Fillmore's post about 3 years

I'm not hugely familiar with V5 but I'll see if I can help.
So having looked at your site there are a few console errors - could you firstly try removing the other sticky JS library you have added (jquery.sticky.js) plus the inline JS that follows and we can go from there.

Brett Mason commented on Cordale Ottley's post over 3 years

Glad that helped! In order to apply a different value to each breakpoint you would need to do something like:
#mycolumn {
background: url(../images/logos/logo.svg) no-repeat rem-calc(map-get($grid-column-gutter, small));

@include breakpoint(medium) {
background-position: rem-calc(map-get($grid-column-gutter, medium));
}
}
And you would need to include a breakpoint for each size you have in the $grid-column-gutter map.
I hope that helps! I've been thinking of submitting a small PR for a helper function for outputting the $grid-column-gutter value without the other code.

Brett Mason commented on Alejandro's post over 3 years

Are you using the Sass version of Foundation?If so you can change the $accordion-content-color variable located in settings file to achieve this.

Brett Mason commented on hassan's post over 3 years

I've added a PR https://github.com/zurb/foundation-sites/pull/8872 which should address this issue, go take a look!Hopefully it should be in the next point release if all works correctly.

Brett Mason commented on Cordale Ottley's post over 3 years

You can use the Sass map-get function, like so:
map-get($grid-column-gutter, medium)
This will return the pixel value of the medium breakpoint gutter. If you wanted a rem value you would just pass this to rem-calc like so: 
rem-calc(map-get($grid-column-gutter, medium))
I hope that helps!

Brett Mason commented on Jay Todtenbier's post over 3 years

From looking at the source code you are using version 6.0.3. Could you update to the latest version and see if this fixes the issue? It looks like the marginTop argument is getting ignored, but I'm using exactly the same markup and it works perfectly on 6.2.3.

Posts Followed


  • 2
    Replies
  • using JS components

    By PaulR

    javascript components

    Just getting started with foundation 6 and would like to know where I am going wrong. I am just trying to include only the components.js that I want to use. Can anyone tell me why this works in my gulp.js file: gulp.task('scripts', function () { g... (continued)

    Last Reply by PaulR almost 4 years ago







  • 74
    Replies
  • Foundation 5 and IE8

    By James Cocker

    ie8Foundation 5usage

    Firstly, I know, I know, IE8 is nearly dead and the recommended way to use Foundation on it is to stick with version 3. However, I have a new site build coming up which unfortunately requires IE8 support, and I'd really like to use the new Foundation 5 wi... (continued)

    Last Reply by manav singh about 1 year ago


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on JD Fillmore's post about 3 years

Awesome we are definitely getting there. So if that's working then that must mean that the sticky classes are missing from your stylesheet. You need to check through your own version and see if they are there or not.

You commented on JD Fillmore's post about 3 years

You could also try and load the Foundation JS from here: http://cdn.foundation5.zurb.com/foundation.js
If those versions of the JS/CSS dont work then I'm running out of ideas!

You commented on JD Fillmore's post about 3 years

Ok so thats a good starting point.
I've just setup a really quick Codepen using your nav code plus some latin just to pad it out: http://codepen.io/brettsmason/pen/ORQkaO
As you can see it works OK. I did notice you had a sticky class on the top-bar element - try removing that and see what happens. If no luck try and load your Foundation css from here: http://cdn.foundation5.zurb.com/foundation.css just to test to see if that works.

You commented on JD Fillmore's post about 3 years

So I had a look again but there is still an error in the console:
Uncaught TypeError: a.indexOf is not a function
This is related to jQuery that you have loaded which seems to be version 3, which I am not sure is supported by V5. There might be an issue with which version the Bower package is pulling in.
Could you try loading jQuery from here: https://code.jquery.com/jquery-2.2.4.min.js
So change <script src="bower_components/jquery/dist/jquery.min.js"></script>
to <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

You commented on JD Fillmore's post about 3 years

I'm not hugely familiar with V5 but I'll see if I can help.
So having looked at your site there are a few console errors - could you firstly try removing the other sticky JS library you have added (jquery.sticky.js) plus the inline JS that follows and we can go from there.

You commented on Cordale Ottley's post over 3 years

Glad that helped! In order to apply a different value to each breakpoint you would need to do something like:
#mycolumn {
background: url(../images/logos/logo.svg) no-repeat rem-calc(map-get($grid-column-gutter, small));

@include breakpoint(medium) {
background-position: rem-calc(map-get($grid-column-gutter, medium));
}
}
And you would need to include a breakpoint for each size you have in the $grid-column-gutter map.
I hope that helps! I've been thinking of submitting a small PR for a helper function for outputting the $grid-column-gutter value without the other code.

You commented on Alejandro's post over 3 years

Are you using the Sass version of Foundation?If so you can change the $accordion-content-color variable located in settings file to achieve this.

You commented on hassan's post over 3 years

I've added a PR https://github.com/zurb/foundation-sites/pull/8872 which should address this issue, go take a look!Hopefully it should be in the next point release if all works correctly.

You commented on Cordale Ottley's post over 3 years

You can use the Sass map-get function, like so:
map-get($grid-column-gutter, medium)
This will return the pixel value of the medium breakpoint gutter. If you wanted a rem value you would just pass this to rem-calc like so: 
rem-calc(map-get($grid-column-gutter, medium))
I hope that helps!

You commented on Jay Todtenbier's post over 3 years

From looking at the source code you are using version 6.0.3. Could you update to the latest version and see if this fixes the issue? It looks like the marginTop argument is getting ignored, but I'm using exactly the same markup and it works perfectly on 6.2.3.

Posts Followed

Following

  • No Content

Followers

  • No Content