Menu icon Foundation

My Posts

  • 1
    Reply
  • Expanded row mixin

    By Henckels

    mixins

    Hi, Can anyone tell me how to create an expanded row with a mixin? I see it references in foundation-sites/scss/grid/_classes.scss but I can't figure out how to implement it.   Thanks.

    Last Reply by Jgarib over 2 years ago




My Comments

Henckels commented on Henckels's post over 3 years

Thanks.

Henckels commented on Henckels's post over 3 years

Oh I get it now, thanks.

I have one other query...I tried using '@mixin menu-expand' but I found that this only worked if I also used '@mixin menu-base'. Is this correct?

Henckels commented on Henckels's post over 3 years

Hi Rafi,

Thanks for replying.

In my code I get the same as you:

 .social li {
   line-height: 1;
    display: inline-block;
    margin-right: 1rem;
} 

But I think the problem is the padding in the anchor tag:

.social > li > a {
      display: block;
      padding: 0.7rem 1rem;
      line-height: 1; 
}

Hope this helps,

Thanks.

Henckels commented on Henckels's post over 3 years

Paul,

Thanks for the reply, things are starting to make more sense now. I've googled 'what-input.js' and have a better understanding of it but I'm still unsure as to what 'foundation.util.mediaQuery.js' does and if/when I should use it. The Docs say that they are helper functions for media queries but what do they actually do? I thought media queries were handled in the css.

Henckels.

Posts Followed

No Content

Following

    No Content

Followers

My Posts




My Comments

You commented on Henckels's post over 3 years

Thanks.

You commented on Henckels's post over 3 years

Oh I get it now, thanks.

I have one other query...I tried using '@mixin menu-expand' but I found that this only worked if I also used '@mixin menu-base'. Is this correct?

You commented on Henckels's post over 3 years

Hi Rafi,

Thanks for replying.

In my code I get the same as you:

 .social li {
   line-height: 1;
    display: inline-block;
    margin-right: 1rem;
} 

But I think the problem is the padding in the anchor tag:

.social > li > a {
      display: block;
      padding: 0.7rem 1rem;
      line-height: 1; 
}

Hope this helps,

Thanks.

You commented on Henckels's post over 3 years

Paul,

Thanks for the reply, things are starting to make more sense now. I've googled 'what-input.js' and have a better understanding of it but I'm still unsure as to what 'foundation.util.mediaQuery.js' does and if/when I should use it. The Docs say that they are helper functions for media queries but what do they actually do? I thought media queries were handled in the css.

Henckels.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content