Menu icon Foundation

Coder | Minnesota

My Posts









My Comments

Steven Thate commented on Steven Thate's post over 3 years

Thanks for your response, @Hans McMurdy !

Sadly, your suggestions weren't having any effect for me. I did find a solution (that hopefully the client will like), though. I just tweaked two values in my .slide-in-down.mui-enter class:

I changed the last parameter of transition-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) from 1.245 to 12, and then changed transform: translateY(100%) to (-2px), and now the top of the submenu pretty much just "bounces down" from the bottom edge of the parent menu. Yay!

Steven Thate commented on Steven Thate's post over 3 years

I do have one follow-up question that's fairly urgent.

I uploaded my prototype project (just the "built" files: css/, images/, js/, index.html so the client can view it, but the javascript isn't (menu dropdown motion ui) isn't working on the staging server. Is there a special workflow for deploying projects generated by Yeti Launch?

Steven Thate commented on Steven Thate's post over 3 years

Excellent!

My foundation-sites dependency was 6.0.0. Updating it worked!

Thanks a bunch.

Steven Thate commented on Steven Thate's post over 3 years

Thanks for your reply!

It's nice to know at least, that it is possible. It may help to know that this is a project generated by Yeti Launch. I noticed in my app.scss file it was importing motion-ui, so I'm just assuming that Yeti Launch installed motion-ui.

Yes, this is pretty much just for "aesthetical" reasons.

Steven Thate commented on hassan's post over 3 years

I have been trying to animate submenus in my top-bar menu. I followed the same pattern used in the document page you listed, and you have to inspect the elements to get the full picture (that is, add data-toggle="toggle-id" to your toggling link), but nothing is working.

Steven Thate commented on Steven Thate's post about 4 years

Looks like it's version 5.5.2

In any case, I wrote a simple solution without using the modal window and got it working.

Thanks

Steven Thate commented on Steven Thate's post about 4 years

Thanks for your reply,

I'm honestly not sure what version it is, other than 5.x. I'm using FoundationPress and the only information on the version of Foundation is uses is "built on Foundation 5"

Steven Thate commented on codestic's post about 4 years

Right.

Apologies, I feel like I rambled and never came to an actual point.

The visibility utility classes are wonderful. But is there any instruction on how to create your own custom visibility class? You may say to simply change the parameters for the small breakpoint, but often times I need a custom breakpoint between small and medium.

Is there any instruction on how to take that custom, in-between media query and write a visibility class for it?

Thanks!

Steven Thate commented on codestic's post about 4 years

While the off-canvas tab-bar (even the name[s] are confusing) is one of my favorite features of Foundation outside of the grid, it's also incredibly frustrating for one reason: It seems really weak when it comes to being mobile.

Okay, I'll catch a lot of flak for that. Let me clarify.

We can pretty easily change the breakpoint for the top-bar, which is great: $topbar-breakpoint: /* custom media query */

But, like Rafi mentioned, there is no breakpoint for the off-canvas tab-bar. It only can be switched on or off depending on your desired screen size: <nav class="tab-bar show-for-small-only">

If we can so easily change our top-bar breakpoint, I feel like it should be just as easy to change the "breakpoint" for the tab-bar, too. Or maybe it actually is as easy and I haven't figured it out yet. Which is certainly possible!

I've dug into the visibility component style sheet, and I honestly can barely figure out what's happening, let alone figure out how to insert my own visibility class without breaking something.

Does anyone have a "quick" guide on how to write custom visibility classes? It'd be so helpful to simply say something like <nav class="tab-bar match-top-bar-bp">.

Steven Thate commented on Steven Thate's post over 4 years

I have found the culprit.

In FoundationPress there is a custom topbar.scss partial which is one of the last partials to be imported.

Inside this partial (located in scss/site/), there are custom styles for .top-bar-section li.active. Comment these out, and voila!

Posts Followed




Following

    No Content

Followers

My Posts

My Comments

You commented on Steven Thate's post over 3 years

Thanks for your response, @Hans McMurdy !

Sadly, your suggestions weren't having any effect for me. I did find a solution (that hopefully the client will like), though. I just tweaked two values in my .slide-in-down.mui-enter class:

I changed the last parameter of transition-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) from 1.245 to 12, and then changed transform: translateY(100%) to (-2px), and now the top of the submenu pretty much just "bounces down" from the bottom edge of the parent menu. Yay!

You commented on Steven Thate's post over 3 years

I do have one follow-up question that's fairly urgent.

I uploaded my prototype project (just the "built" files: css/, images/, js/, index.html so the client can view it, but the javascript isn't (menu dropdown motion ui) isn't working on the staging server. Is there a special workflow for deploying projects generated by Yeti Launch?

You commented on Steven Thate's post over 3 years

Excellent!

My foundation-sites dependency was 6.0.0. Updating it worked!

Thanks a bunch.

You commented on Steven Thate's post over 3 years

Thanks for your reply!

It's nice to know at least, that it is possible. It may help to know that this is a project generated by Yeti Launch. I noticed in my app.scss file it was importing motion-ui, so I'm just assuming that Yeti Launch installed motion-ui.

Yes, this is pretty much just for "aesthetical" reasons.

You commented on hassan's post over 3 years

I have been trying to animate submenus in my top-bar menu. I followed the same pattern used in the document page you listed, and you have to inspect the elements to get the full picture (that is, add data-toggle="toggle-id" to your toggling link), but nothing is working.

You commented on Steven Thate's post about 4 years

Looks like it's version 5.5.2

In any case, I wrote a simple solution without using the modal window and got it working.

Thanks

You commented on Steven Thate's post about 4 years

Thanks for your reply,

I'm honestly not sure what version it is, other than 5.x. I'm using FoundationPress and the only information on the version of Foundation is uses is "built on Foundation 5"

You commented on codestic's post about 4 years

Right.

Apologies, I feel like I rambled and never came to an actual point.

The visibility utility classes are wonderful. But is there any instruction on how to create your own custom visibility class? You may say to simply change the parameters for the small breakpoint, but often times I need a custom breakpoint between small and medium.

Is there any instruction on how to take that custom, in-between media query and write a visibility class for it?

Thanks!

You commented on codestic's post about 4 years

While the off-canvas tab-bar (even the name[s] are confusing) is one of my favorite features of Foundation outside of the grid, it's also incredibly frustrating for one reason: It seems really weak when it comes to being mobile.

Okay, I'll catch a lot of flak for that. Let me clarify.

We can pretty easily change the breakpoint for the top-bar, which is great: $topbar-breakpoint: /* custom media query */

But, like Rafi mentioned, there is no breakpoint for the off-canvas tab-bar. It only can be switched on or off depending on your desired screen size: <nav class="tab-bar show-for-small-only">

If we can so easily change our top-bar breakpoint, I feel like it should be just as easy to change the "breakpoint" for the tab-bar, too. Or maybe it actually is as easy and I haven't figured it out yet. Which is certainly possible!

I've dug into the visibility component style sheet, and I honestly can barely figure out what's happening, let alone figure out how to insert my own visibility class without breaking something.

Does anyone have a "quick" guide on how to write custom visibility classes? It'd be so helpful to simply say something like <nav class="tab-bar match-top-bar-bp">.

You commented on Steven Thate's post over 4 years

I have found the culprit.

In FoundationPress there is a custom topbar.scss partial which is one of the last partials to be imported.

Inside this partial (located in scss/site/), there are custom styles for .top-bar-section li.active. Comment these out, and voila!

Posts Followed

Following

  • No Content

Followers

  • No Content