Menu icon Foundation

Designer | Berlin

My Posts

No Content

My Comments

Norbert Stüken commented on Tim Martin's post about 5 years

@Rafi Benkual: Any descent fix coming? Or is there perhaps an external off-canvas menu solution recommended instead of? Unfortunately, all posted solutions had their drawbacks so far.

Norbert Stüken commented on Albert's post about 5 years

@Arie Katz: This is probably the best solution so far as long as you are not intending to use anchor scrolling. Check out my comment on the prior page for more info.

Norbert Stüken commented on Albert's post over 5 years

Thanks to David Govea and Nobu Kakegawa for this solution attempt. It seemed to work for me as well, but today I built everything back to a non-sticky foundation-standard off-canvas as it caused some problems. Here a list of problems I experienced. Perhaps you can resolve those:

  1. With the additional header fix of muhammadcahya (https://github.com/zurb/foundation/issues/3710) I couldn't get a typical anchor scrolling like http://css-tricks.com/snippets/jquery/smooth-scrolling/ to work as the "bottom: 0" from the .main-section-class blocked it.
  2. On Opera 23 (Windows 8.1) I had some content overlay scrolling issues after anchors were clicked.
  3. On Safari 5 (Windows 8.1) no link on the menu was clickable.

Hope this helps. I look forward to a fully working solution in a future update of foundation.

Norbert Stüken commented on Christian Solorzano's post over 5 years

Just had the same problem with centering a logo in the top-bar. Actually, the utility classes didn't help me much with that. Working Example?

The solution which worked for me is the absolute centering method of Terkel Gjervig which he described in this (closed) post: http://foundation.zurb.com/forum/posts/1832-logo-centered-in-top-bar.

Until now, I can't find any drawbacks with this solution.

Norbert Stüken commented on Eduardo Weidman's post over 5 years

Just had the same problem with the top-bar and followed the absolute centering method of Terkel Gjervig which he described in this closed post: http://foundation.zurb.com/forum/posts/1832-logo-centered-in-top-bar. This worked perfect for me and can't find any drawbacks yet.

Norbert Stüken commented on Ray Kanani's post over 5 years

Hello Ray,
I had the same problem. I solved it by moving the label to a new row prior to the row with the input field and the postfix button. In order to keep the relation to the input field, just add a "for"-attribute to the label and an "id"-attribute to the input field. Your code would look like this then:

<!--Email Input-->
<div class="row">
     <div class="small-12 columns">
          <label for="email">How can we stay in touch?</label>
     </div>
</div>
<div class="row collapse">
     <div class="small-9 medium-10 columns">
          <input name="email" type="email" id="email" placeholder="[email protected]">
          <small class="error">An email address is required.</small>
     </div>
     <div class="small-3 medium-2 columns">
          <input type="submit" value="Sign-Up" class="button postfix">
     </div>
</div>

Hope this helps.

Norbert Stüken commented on Steve Trask's post over 5 years

Thanks Neil for your hack. As Rafi stated on the above github url, there is an open discussion about this issue and there jaycode posted a workaround which is not depended on a timer:

 $(document).on('replace', 'img', function (e, new_path, original_path) {
    $(window).trigger('resize');
});

By the way I'm only using interchange, so this resize issue doesn't have anything to do with Orbit.

Posts Followed








Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Tim Martin's post about 5 years

@Rafi Benkual: Any descent fix coming? Or is there perhaps an external off-canvas menu solution recommended instead of? Unfortunately, all posted solutions had their drawbacks so far.

You commented on Albert's post about 5 years

@Arie Katz: This is probably the best solution so far as long as you are not intending to use anchor scrolling. Check out my comment on the prior page for more info.

You commented on Albert's post over 5 years

Thanks to David Govea and Nobu Kakegawa for this solution attempt. It seemed to work for me as well, but today I built everything back to a non-sticky foundation-standard off-canvas as it caused some problems. Here a list of problems I experienced. Perhaps you can resolve those:

  1. With the additional header fix of muhammadcahya (https://github.com/zurb/foundation/issues/3710) I couldn't get a typical anchor scrolling like http://css-tricks.com/snippets/jquery/smooth-scrolling/ to work as the "bottom: 0" from the .main-section-class blocked it.
  2. On Opera 23 (Windows 8.1) I had some content overlay scrolling issues after anchors were clicked.
  3. On Safari 5 (Windows 8.1) no link on the menu was clickable.

Hope this helps. I look forward to a fully working solution in a future update of foundation.

You commented on Christian Solorzano's post over 5 years

Just had the same problem with centering a logo in the top-bar. Actually, the utility classes didn't help me much with that. Working Example?

The solution which worked for me is the absolute centering method of Terkel Gjervig which he described in this (closed) post: http://foundation.zurb.com/forum/posts/1832-logo-centered-in-top-bar.

Until now, I can't find any drawbacks with this solution.

You commented on Eduardo Weidman's post over 5 years

Just had the same problem with the top-bar and followed the absolute centering method of Terkel Gjervig which he described in this closed post: http://foundation.zurb.com/forum/posts/1832-logo-centered-in-top-bar. This worked perfect for me and can't find any drawbacks yet.

You commented on Ray Kanani's post over 5 years

Hello Ray,
I had the same problem. I solved it by moving the label to a new row prior to the row with the input field and the postfix button. In order to keep the relation to the input field, just add a "for"-attribute to the label and an "id"-attribute to the input field. Your code would look like this then:

<!--Email Input-->
<div class="row">
     <div class="small-12 columns">
          <label for="email">How can we stay in touch?</label>
     </div>
</div>
<div class="row collapse">
     <div class="small-9 medium-10 columns">
          <input name="email" type="email" id="email" placeholder="[email protected]">
          <small class="error">An email address is required.</small>
     </div>
     <div class="small-3 medium-2 columns">
          <input type="submit" value="Sign-Up" class="button postfix">
     </div>
</div>

Hope this helps.

You commented on Steve Trask's post over 5 years

Thanks Neil for your hack. As Rafi stated on the above github url, there is an open discussion about this issue and there jaycode posted a workaround which is not depended on a timer:

 $(document).on('replace', 'img', function (e, new_path, original_path) {
    $(window).trigger('resize');
});

By the way I'm only using interchange, so this resize issue doesn't have anything to do with Orbit.

Posts Followed

Following

  • No Content

Followers

  • No Content