Menu icon Foundation

Designer | Hereford, UK

Proud Yetinaut!

My Posts

  • 1
    Reply
  • Running equalizer with JS

    By Brett Mason

    Equalizer

    Is it possible to run equalizer on elements without having to use the required markup? I have a row of widgets in WordPress and I can't add the required markup so looked at the docs and I assume it should be possible with no markup. Can anyone give me ... (continued)

    Last Reply by Stefan Reimert almost 3 years ago



My Comments

Brett Mason commented on jinch's post almost 2 years

You just need to add data-content-scroll="false" to your off canvas and that will lock scrolling of the content.
Hope that helps!

Brett Mason commented on snarf1974's post almost 2 years

So from looking at the site, these styles are making the off canvas show on medium:
.off-canvas {
position: static;
width: auto !important;
overflow-y: initial;
background: none;
}
This is being applied to medium and up screens, but you actually want it to work on large and up. Try changing that and seeing if it works.

Brett Mason commented on Keke's post almost 2 years

I thought it would be easier to go over your problems here rather than in the other off canvas thread.So looking at your site (https://www.midians.com/newsite/tab-test-6-3.php) you have a few issues going on.
You said this was a 6.3 site, however the CSS thats being loaded is definately not 6.3, as the off canvas classes are styled differently. Can you check this first?
Then I notice you have a div in between the off canvas and the off canvas content (widemenu). Can you move this before the off canvas? The CSS requires them to be next to eachover.
The markup is also different for 6.3 (less of it) see here: http://foundation.zurb.com/sites/docs/off-canvas.html#wrapper
Give that a go and see how we get on.

Brett Mason commented on Wiechert Hooghwinkel's post almost 2 years

Unfortunately with the accordion menu that isn't currently possible. However I Have created a PR on Github for the feature: https://github.com/zurb/foundation-sites/pull/9348
What you probably want then is a drilldown menu, and then set the `data-parent-link="true" attribute. This will allow the parent link to work as you want.

Brett Mason commented on Wiechert Hooghwinkel's post almost 2 years

Well, generally a dropdown menu would normally be used for non-touch devices (though there are exceptions of course) which tend to be on small screens.
Also the dropdown menu plugin detects the container its in so it doesn't get hidden, so another menu plugin would be my suggestion :)

Brett Mason commented on Kyle De Sousa's post almost 2 years

Hi Kyle
Looks like you were nearly there.Just remove the px from the code and that should work how you want it to (just tested it myself).
Here's a full example:
.container {
@include grid-row(12);

.col-left {
@include grid-column(12, 0);

@include breakpoint(medium) {
  @include grid-column(6, 50);
}

}

.col-right {
@include grid-column(12, 0);

@include breakpoint(medium) {
  @include grid-column(6, 50);
}

}
}

Brett Mason commented on Stéphane Richin's post almost 2 years

Hi Stéphane
In 6.3 typography was changed a little to allow for more control (see http://foundation.zurb.com/sites/docs/typography-base.html#header-styles)
Also line heights with a unitless are always returned.
What's happening in your case is your rem value you are passing (2.75rem) is being multiplied by the base font size (1 rem) and giving you a line height of 2.75.
Depending on what you want your line height set as, you could pass 44px as the value which would give you a line height of 1.83333.
Does that help? Sorry its hard to explain!

Brett Mason commented on Adam Sherman's post almost 2 years

Hi Adam
Are you able to provide a link to your site so we can see whats going on? Alternatively a CodePen would do.What you posted looks correct, so there must be something else going on. Are there any errors in the console?

Brett Mason commented on David Shen's post almost 2 years

Hi David
Would it be possible to post a CodePen example? This might help work out what exactly you are doing and whats going wrong.

Brett Mason commented on RCD's post almost 2 years

Could you post a CodePen showing what you are trying to do? It might help explain it and we might be able to help.

Posts Followed









  • 9
    Replies
  • Off-canvas unresponsive

    By Chris

    off-canvas

    Version 6.2.4- I downloaded the most basic package with the basic styles from the site. No NPM or Bower or any of that. I was going through a tutorial and everything worked until I got to the off-canvas. I made sure I add the proper code for this version... (continued)

    Last Reply by Chris almost 2 years ago



Following

    No Content

Followers

My Posts


My Comments

You commented on jinch's post almost 2 years

You just need to add data-content-scroll="false" to your off canvas and that will lock scrolling of the content.
Hope that helps!

You commented on snarf1974's post almost 2 years

So from looking at the site, these styles are making the off canvas show on medium:
.off-canvas {
position: static;
width: auto !important;
overflow-y: initial;
background: none;
}
This is being applied to medium and up screens, but you actually want it to work on large and up. Try changing that and seeing if it works.

You commented on Keke's post almost 2 years

I thought it would be easier to go over your problems here rather than in the other off canvas thread.So looking at your site (https://www.midians.com/newsite/tab-test-6-3.php) you have a few issues going on.
You said this was a 6.3 site, however the CSS thats being loaded is definately not 6.3, as the off canvas classes are styled differently. Can you check this first?
Then I notice you have a div in between the off canvas and the off canvas content (widemenu). Can you move this before the off canvas? The CSS requires them to be next to eachover.
The markup is also different for 6.3 (less of it) see here: http://foundation.zurb.com/sites/docs/off-canvas.html#wrapper
Give that a go and see how we get on.

You commented on Wiechert Hooghwinkel's post almost 2 years

Unfortunately with the accordion menu that isn't currently possible. However I Have created a PR on Github for the feature: https://github.com/zurb/foundation-sites/pull/9348
What you probably want then is a drilldown menu, and then set the `data-parent-link="true" attribute. This will allow the parent link to work as you want.

You commented on Wiechert Hooghwinkel's post almost 2 years

Well, generally a dropdown menu would normally be used for non-touch devices (though there are exceptions of course) which tend to be on small screens.
Also the dropdown menu plugin detects the container its in so it doesn't get hidden, so another menu plugin would be my suggestion :)

You commented on Kyle De Sousa's post almost 2 years

Hi Kyle
Looks like you were nearly there.Just remove the px from the code and that should work how you want it to (just tested it myself).
Here's a full example:
.container {
@include grid-row(12);

.col-left {
@include grid-column(12, 0);

@include breakpoint(medium) {
  @include grid-column(6, 50);
}

}

.col-right {
@include grid-column(12, 0);

@include breakpoint(medium) {
  @include grid-column(6, 50);
}

}
}

You commented on Stéphane Richin's post almost 2 years

Hi Stéphane
In 6.3 typography was changed a little to allow for more control (see http://foundation.zurb.com/sites/docs/typography-base.html#header-styles)
Also line heights with a unitless are always returned.
What's happening in your case is your rem value you are passing (2.75rem) is being multiplied by the base font size (1 rem) and giving you a line height of 2.75.
Depending on what you want your line height set as, you could pass 44px as the value which would give you a line height of 1.83333.
Does that help? Sorry its hard to explain!

You commented on Adam Sherman's post almost 2 years

Hi Adam
Are you able to provide a link to your site so we can see whats going on? Alternatively a CodePen would do.What you posted looks correct, so there must be something else going on. Are there any errors in the console?

You commented on David Shen's post almost 2 years

Hi David
Would it be possible to post a CodePen example? This might help work out what exactly you are doing and whats going wrong.

You commented on RCD's post almost 2 years

Could you post a CodePen showing what you are trying to do? It might help explain it and we might be able to help.

Posts Followed

Following

  • No Content

Followers

  • No Content