Menu icon Foundation

Coder

My Posts


My Comments

Lars Bratke commented on Lars Bratke's post about 3 years
Lars Bratke commented on Lars Bratke's post about 3 years

This is how it should (and actually does) work - no need for destroying the plugin.
var $dropdown = new Foundation.Dropdown($('#dropdown'), {
hover: (Foundation.MediaQuery.current == 'small' ? false : true)
});

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) {
if (newSize == 'small') {
$dropdown = new Foundation.Dropdown($('#dropdown'), {
hover: false
});
}
else if (oldSize == 'small') {
$dropdown = new Foundation.Dropdown($('#dropdown'), {
hover: true
});
}
});
The problem is, that the events "mouseenter.zf.dropdown" and "mouseleave.zf.dropdown" are currently not removed from the anchors once they are set - even if you change the option "hover" to "false" later.
I'll report a bug.

Lars Bratke commented on Ivan Poddubsky's post over 4 years

Without a custom class:

<ul class="medium-block-grid-3 small-block-grid-2 text-center">
  <li>Block</li>
  <li>Block</li>
  <li>Block</li>
  <li>Block</li>
  <li>Block</li>
</ul>
[class*="block-grid-"] {
  &.text-center {
    > li {
      float: none;
      display: inline-block;
    }
  }
}

Lars Bratke commented on Rafi Benkual's post almost 5 years

You have to uncomment the media query ranges in your _settings.scss so you can use those variables below for the top-bar.

In your case $large-range, $screen and $large-up. Search for "d. Media Query Ranges" in your _settings.scss.

I'm not sure why you have to do so in this case, but it works...

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Lars Bratke's post about 3 years
You commented on Lars Bratke's post about 3 years

This is how it should (and actually does) work - no need for destroying the plugin.
var $dropdown = new Foundation.Dropdown($('#dropdown'), {
hover: (Foundation.MediaQuery.current == 'small' ? false : true)
});

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) {
if (newSize == 'small') {
$dropdown = new Foundation.Dropdown($('#dropdown'), {
hover: false
});
}
else if (oldSize == 'small') {
$dropdown = new Foundation.Dropdown($('#dropdown'), {
hover: true
});
}
});
The problem is, that the events "mouseenter.zf.dropdown" and "mouseleave.zf.dropdown" are currently not removed from the anchors once they are set - even if you change the option "hover" to "false" later.
I'll report a bug.

You commented on Ivan Poddubsky's post over 4 years

Without a custom class:

<ul class="medium-block-grid-3 small-block-grid-2 text-center">
  <li>Block</li>
  <li>Block</li>
  <li>Block</li>
  <li>Block</li>
  <li>Block</li>
</ul>
[class*="block-grid-"] {
  &.text-center {
    > li {
      float: none;
      display: inline-block;
    }
  }
}

You commented on Rafi Benkual's post almost 5 years

You have to uncomment the media query ranges in your _settings.scss so you can use those variables below for the top-bar.

In your case $large-range, $screen and $large-up. Search for "d. Media Query Ranges" in your _settings.scss.

I'm not sure why you have to do so in this case, but it works...

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content