Menu icon Foundation

Designer

My Posts


  • 2
    Replies
  • ZF 6 Callouts

    By Val Ery

    Callout

    Hi All! Quote: "Callouts combine panels and alerts from Foundation 5 into one generic container component." (http://foundation.zurb.com/sites/docs/callout.html) Now I'm trying to create a theme based on the foundation for sites 6 for my favorite CMS... (continued)

    Last Reply by Val Ery over 1 year ago


My Comments

Val Ery commented on Shelley's post 1 day

Hi Shelley!
I think you can put content with different heights into list items. With one condition: the content must be aligned vertically.
The easiest way to do this is to add three rules to ul-element.
display: flex;
justify-content: center;
align-items: center;
Plus - turn off the animation
data-use-m-u-i="false"

Val Ery commented on Mike Hoogerhyde's post 4 days

Hi Mike!
Try this
<section id="trailer">
<div class="row">
<div class="small-12 medium-10 large-6 small-centered columns">
<h1 class="text-center">Star Wars Trailer</h1>
<div class="responsive-embed">
<iframe width="640" height="auto" src="https://www.youtube.com/embed/nywPf1p-BBY?rel=0&amp;amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</section>

Val Ery commented on Scott McCullough's post 8 days

Hi Scott!
Add to each block with .column-block the class "text-center"
...
<div class="column column-block text-center">
<img src="//placehold.it/300X300" class="thumbnail" alt="">
</div>
...

Val Ery commented on Julian Meanchoff's post 9 days

Quote: "it still shows this black font when I want it to be white."
Font color - $button-color: $white;
Or - $button-color: #ffffff;

Val Ery commented on Julian Meanchoff's post 9 days

Hi Julian!
For buttons there is no class "primary". There is a global setting
$foundation-palette: (
primary: #1779ba,
secondary: #767676,
success: #3adb76,
warning: #ffae00,
alert: #cc4b37,
);
And color setting for button
$button-background: $primary-color;
If you want to change the button background, create a new variable ($custom-color: #ff0000;) and change rule on
$button-background: $custom-color;
Or simply list the color
$button-background: #ff0000;

Val Ery commented on Sylvain LB's post 15 days

Hi Sylvain!
An example of your code would very much help in resolving the issue. The code
<a data-open="popup">Open me</a>
<div id="popup" class="reveal" data-reveal>
... modal content here ...
</div>
works fine: the pop-up window closes by clicking outside the modal window. As a solution, you can try adding an attribute data-close-on-click
<div id="popup" class="reveal" data-reveal data-close-on-click>
... modal content here ...
</div>
See docs - http://foundation.zurb.com/sites/docs/reveal.html#js-options
 

Val Ery commented on Karima Premji's post 21 days

Hi Rafi!Now there are problems with the responsive menu.This tutorial shows you how to create a responsive menu - http://zurb.com/university/lessons/have-it-your-way-with-foundation-s-modular-responsive-navigation. Your code is here - https://codepen.io/rafibomb/pen/wozvRQ.
I added:1. block with the class "title-bar".2. button with a hamburger icon3. Foundation version 6.3.1
(css - https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css
js - https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js)
<div class="row">
<div class="small-12">
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle="example-menu"></button>
</div><!-- .title-bar -->
</div><!--small-12 -->
<div class="columns">
<ul id="example-menu" class="menu" data-responsive-menu="drilldown medium-dropdown">
<li>
<a href="#">Item 1</a>
<ul class="vertical menu">
<li>
<a href="#">Item 1A</a>
<ul class="vertical menu">
<li><a href="#">Item 1A</a></li>
<li><a href="#">Item 1B</a></li>
<li><a href="#">Item 1C</a></li>
<li><a href="#">Item 1D</a></li>
<li><a href="#">Item 1E</a></li>
</ul>
</li>
<li><a href="#">Item 1B</a></li>
</ul>
</li>
<li>
<a href="#">Item 2</a>
<ul class="vertical menu">
<li><a href="#">Item 2A</a></li>
<li><a href="#">Item 2B</a></li>
</ul>
</li>
<li>
<a href="#">Item 3</a>
<ul class="vertical menu">
<li><a href="#">Item 3A</a></li>
<li><a href="#">Item 3B</a></li>
</ul>
</li>
</ul>
</div>
</div>
Result:After changing the size of the screen and opening any menu item, the drop-down menu stops working.
Here there is a question on this issue - forum

Val Ery commented on Thomas Gerds's post 22 days

 Hi Edgardo!
Yes you are right. There is a problem. It appears on version 6.3.1. My old example (https://codepen.io/Val_Ery/pen/YNomGV) when changing version to 6.3.1 displays a drop-down menu in the same way as you described.
Try to return to version 6.3.0 :( And be sure to report the problem to the developers.

Val Ery commented on Carol's post about 1 month

Hi Carol!
If you have already solved the problem, then I'm sorry :)
CDN here - https://cdnjs.com/libraries
Foundation CDN versions here - https://cdnjs.com/libraries/foundation
And ... Your site (I just copied the HTML code and added your styles) - http://codepen.io/Val_Ery/full/MpVeXO/

Val Ery commented on Stephen Bramlett's post about 1 month

Hi Stephen!
I'm glad you liked it :)
If you have any questions, ask. Together we will try to find an acceptable solution...
At the moment, you can easily get this:A) display angular segments instead of "rings"B) display a simple percentage value instead of an input element

Posts Followed

  • 2
    Replies
  • Orbit - text only slider height

    By Shelley

    Orbit

    I'm developing a site where I'm using Orbit (F6) to display text - however, the container seems to be fixed in height, particularly on mobile devices.&nbsp; Am I missing out on something to have&nbsp;the height auto set, even if it means that the contain... (continued)

    Last Reply by Val Ery 1 day ago











Following

    No Content

Followers

My Posts


My Comments

You commented on Shelley's post 1 day

Hi Shelley!
I think you can put content with different heights into list items. With one condition: the content must be aligned vertically.
The easiest way to do this is to add three rules to ul-element.
display: flex;
justify-content: center;
align-items: center;
Plus - turn off the animation
data-use-m-u-i="false"

You commented on Mike Hoogerhyde's post 4 days

Hi Mike!
Try this
<section id="trailer">
<div class="row">
<div class="small-12 medium-10 large-6 small-centered columns">
<h1 class="text-center">Star Wars Trailer</h1>
<div class="responsive-embed">
<iframe width="640" height="auto" src="https://www.youtube.com/embed/nywPf1p-BBY?rel=0&amp;amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</section>

You commented on Scott McCullough's post 8 days

Hi Scott!
Add to each block with .column-block the class "text-center"
...
<div class="column column-block text-center">
<img src="//placehold.it/300X300" class="thumbnail" alt="">
</div>
...

You commented on Julian Meanchoff's post 9 days

Quote: "it still shows this black font when I want it to be white."
Font color - $button-color: $white;
Or - $button-color: #ffffff;

You commented on Julian Meanchoff's post 9 days

Hi Julian!
For buttons there is no class "primary". There is a global setting
$foundation-palette: (
primary: #1779ba,
secondary: #767676,
success: #3adb76,
warning: #ffae00,
alert: #cc4b37,
);
And color setting for button
$button-background: $primary-color;
If you want to change the button background, create a new variable ($custom-color: #ff0000;) and change rule on
$button-background: $custom-color;
Or simply list the color
$button-background: #ff0000;

You commented on Sylvain LB's post 15 days

Hi Sylvain!
An example of your code would very much help in resolving the issue. The code
<a data-open="popup">Open me</a>
<div id="popup" class="reveal" data-reveal>
... modal content here ...
</div>
works fine: the pop-up window closes by clicking outside the modal window. As a solution, you can try adding an attribute data-close-on-click
<div id="popup" class="reveal" data-reveal data-close-on-click>
... modal content here ...
</div>
See docs - http://foundation.zurb.com/sites/docs/reveal.html#js-options
 

You commented on Karima Premji's post 21 days

Hi Rafi!Now there are problems with the responsive menu.This tutorial shows you how to create a responsive menu - http://zurb.com/university/lessons/have-it-your-way-with-foundation-s-modular-responsive-navigation. Your code is here - https://codepen.io/rafibomb/pen/wozvRQ.
I added:1. block with the class "title-bar".2. button with a hamburger icon3. Foundation version 6.3.1
(css - https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css
js - https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js)
<div class="row">
<div class="small-12">
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle="example-menu"></button>
</div><!-- .title-bar -->
</div><!--small-12 -->
<div class="columns">
<ul id="example-menu" class="menu" data-responsive-menu="drilldown medium-dropdown">
<li>
<a href="#">Item 1</a>
<ul class="vertical menu">
<li>
<a href="#">Item 1A</a>
<ul class="vertical menu">
<li><a href="#">Item 1A</a></li>
<li><a href="#">Item 1B</a></li>
<li><a href="#">Item 1C</a></li>
<li><a href="#">Item 1D</a></li>
<li><a href="#">Item 1E</a></li>
</ul>
</li>
<li><a href="#">Item 1B</a></li>
</ul>
</li>
<li>
<a href="#">Item 2</a>
<ul class="vertical menu">
<li><a href="#">Item 2A</a></li>
<li><a href="#">Item 2B</a></li>
</ul>
</li>
<li>
<a href="#">Item 3</a>
<ul class="vertical menu">
<li><a href="#">Item 3A</a></li>
<li><a href="#">Item 3B</a></li>
</ul>
</li>
</ul>
</div>
</div>
Result:After changing the size of the screen and opening any menu item, the drop-down menu stops working.
Here there is a question on this issue - forum

You commented on Thomas Gerds's post 22 days

 Hi Edgardo!
Yes you are right. There is a problem. It appears on version 6.3.1. My old example (https://codepen.io/Val_Ery/pen/YNomGV) when changing version to 6.3.1 displays a drop-down menu in the same way as you described.
Try to return to version 6.3.0 :( And be sure to report the problem to the developers.

You commented on Carol's post about 1 month

Hi Carol!
If you have already solved the problem, then I'm sorry :)
CDN here - https://cdnjs.com/libraries
Foundation CDN versions here - https://cdnjs.com/libraries/foundation
And ... Your site (I just copied the HTML code and added your styles) - http://codepen.io/Val_Ery/full/MpVeXO/

You commented on Stephen Bramlett's post about 1 month

Hi Stephen!
I'm glad you liked it :)
If you have any questions, ask. Together we will try to find an acceptable solution...
At the moment, you can easily get this:A) display angular segments instead of "rings"B) display a simple percentage value instead of an input element

Posts Followed

Following

  • No Content

Followers

  • No Content