Menu icon Foundation

Developer | Turkiye

a front end developer

My Posts

No Content

My Comments

Ercan Murat KISACA commented on ashley's post almost 4 years

Just use large-up-5 as below, you will see there is no difference between large-block-grid-5
HTML
<div class="row small-up-1 medium-up-2 large-up-5">
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
</div>

Ercan Murat KISACA commented on ashley's post almost 4 years

Block grid is not removed it is just integrated into default Grid.

http://foundation.zurb.com/sites/docs/grid.html#block-grids

Ercan Murat KISACA commented on Fernando Munoz's post almost 4 years

http://foundation.zurb.com/sites/docs/dropdown-menu.html

There is a forceFollow option in Plugin options. Can you try to set it to false?

Ercan Murat KISACA commented on Fernando Munoz's post almost 4 years

I think it is a default Foundation behaviour and I think it is necessary. Because;

When on mobile, you know, user cannot hover something. It should be by tapping. Because of this, everything on menu actions happen in 2 steps.
1-Tap to menu item 2-Tap to Link

I think you should leave it as is. I think it is best for UX.

Ercan Murat KISACA commented on Antonis Iliadis's post almost 4 years

Feel free to ask anything in your mind.

How did you add Orbit Slider in JointsWP? I can help more specificly after learning this.

Ercan Murat KISACA commented on Antonis Iliadis's post almost 4 years

Try setting a new image src for image.
Here is the default code at JointsWP
HTML
<button class="orbit-previous" tabindex="0"><span class="show-for-sr">Previous Slide</span><img draggable="false" class="emoji" alt="◀" src="http://s.w.org/images/core/emoji/72x72/25c0.png"></button>

You can try below for adding a local image:

<button class="orbit-previous" tabindex="0"><span class="show-for-sr">Previous Slide</span><img draggable="false" class="emoji" alt="" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/XXX.jpg"></button> 

You should do this for next button too.

Hope this helps

Ercan Murat KISACA commented on Tracy Kendall's post almost 4 years

Did you inspect the element on browser with mobile emulation?
Is the necessary html markup added in to the codes? If so, there is a css issue.

Also, are you sure you are editing the right menu? It sometimes happens and we may miss these things.

Ercan Murat KISACA commented on Aaron Marbet's post almost 4 years

I just added a "Dropdown" container into the Topbar menu to perform a mega menu.
It works very very well
Do not forget to set hover and hoverpane to true.

Sample code is here:

      <div class="top-bar">
        <div class="top-bar-left">
          <ul class="dropdown menu" data-dropdown-menu>
            <li><a href="#" class="dropdown" data-toggle="balonlar">Balon ve Folyo Balon</a>
                    <div class="dropdown-pane" id="balonlar" data-dropdown data-options="closeOnClick:true; hover: true; hoverPane: true">
                      <p>Balon içerik</p>
                    </div>
            </li>


Ercan Murat KISACA commented on Haiden Taylor's post about 5 years

Why don't you use this?
HTML
<div class="row">
<div class="medium-6 large-6 columns">
<p>Content for column 1</p>
</div>
<div class="medium-6 large-6 columns">
<p>Content for column 2</p>
</div>
</div>

You can also extend the row and column structure as much as you can if you stay true to "first open a row" rule. for example.

<div class="row"> 
<div class="small-4 columns">
  <div class="row">
      <div class="medium-6 large-6 columns">
         <p>Content for column 1</p>
      </div>
      <div class="medium-6 large-6 columns">
         <p>Content for column 2</p>
      </div>
  </div>   
</div>   
 <div class="small-4 columns">
  <div class="row">
      <div class="medium-6 large-6 columns">
         <p>Content for column 1</p>
      </div>
      <div class="medium-6 large-6 columns">
         <p>Content for column 2</p>
      </div>
  </div>   
</div>   
 <div class="small-4 columns">
  <div class="row">
      <div class="medium-6 large-6 columns">
         <p>Content for column 1</p>
      </div>
      <div class="medium-6 large-6 columns">
         <p>Content for column 2</p>
      </div>
  </div>   
</div>   

</div>

Ercan Murat KISACA commented on cfir bitan's post about 5 years

Do not add anything fancy to topbar also. Stay true to its structure on the docs.

If you want to achieve totally different navigations on small and large views, create 2 different markup for them and use visibility classes, "hide-for-small" for desktop navigation and "show-for-small" for mobile navigation.

That will be more easy and painless..

Posts Followed


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on ashley's post almost 4 years

Just use large-up-5 as below, you will see there is no difference between large-block-grid-5
HTML
<div class="row small-up-1 medium-up-2 large-up-5">
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
</div>

You commented on ashley's post almost 4 years

Block grid is not removed it is just integrated into default Grid.

http://foundation.zurb.com/sites/docs/grid.html#block-grids

You commented on Fernando Munoz's post almost 4 years

http://foundation.zurb.com/sites/docs/dropdown-menu.html

There is a forceFollow option in Plugin options. Can you try to set it to false?

You commented on Fernando Munoz's post almost 4 years

I think it is a default Foundation behaviour and I think it is necessary. Because;

When on mobile, you know, user cannot hover something. It should be by tapping. Because of this, everything on menu actions happen in 2 steps.
1-Tap to menu item 2-Tap to Link

I think you should leave it as is. I think it is best for UX.

You commented on Antonis Iliadis's post almost 4 years

Feel free to ask anything in your mind.

How did you add Orbit Slider in JointsWP? I can help more specificly after learning this.

You commented on Antonis Iliadis's post almost 4 years

Try setting a new image src for image.
Here is the default code at JointsWP
HTML
<button class="orbit-previous" tabindex="0"><span class="show-for-sr">Previous Slide</span><img draggable="false" class="emoji" alt="◀" src="http://s.w.org/images/core/emoji/72x72/25c0.png"></button>

You can try below for adding a local image:

<button class="orbit-previous" tabindex="0"><span class="show-for-sr">Previous Slide</span><img draggable="false" class="emoji" alt="" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/XXX.jpg"></button> 

You should do this for next button too.

Hope this helps

You commented on Tracy Kendall's post almost 4 years

Did you inspect the element on browser with mobile emulation?
Is the necessary html markup added in to the codes? If so, there is a css issue.

Also, are you sure you are editing the right menu? It sometimes happens and we may miss these things.

You commented on Aaron Marbet's post almost 4 years

I just added a "Dropdown" container into the Topbar menu to perform a mega menu.
It works very very well
Do not forget to set hover and hoverpane to true.

Sample code is here:

      <div class="top-bar">
        <div class="top-bar-left">
          <ul class="dropdown menu" data-dropdown-menu>
            <li><a href="#" class="dropdown" data-toggle="balonlar">Balon ve Folyo Balon</a>
                    <div class="dropdown-pane" id="balonlar" data-dropdown data-options="closeOnClick:true; hover: true; hoverPane: true">
                      <p>Balon içerik</p>
                    </div>
            </li>


You commented on Haiden Taylor's post about 5 years

Why don't you use this?
HTML
<div class="row">
<div class="medium-6 large-6 columns">
<p>Content for column 1</p>
</div>
<div class="medium-6 large-6 columns">
<p>Content for column 2</p>
</div>
</div>

You can also extend the row and column structure as much as you can if you stay true to "first open a row" rule. for example.

<div class="row"> 
<div class="small-4 columns">
  <div class="row">
      <div class="medium-6 large-6 columns">
         <p>Content for column 1</p>
      </div>
      <div class="medium-6 large-6 columns">
         <p>Content for column 2</p>
      </div>
  </div>   
</div>   
 <div class="small-4 columns">
  <div class="row">
      <div class="medium-6 large-6 columns">
         <p>Content for column 1</p>
      </div>
      <div class="medium-6 large-6 columns">
         <p>Content for column 2</p>
      </div>
  </div>   
</div>   
 <div class="small-4 columns">
  <div class="row">
      <div class="medium-6 large-6 columns">
         <p>Content for column 1</p>
      </div>
      <div class="medium-6 large-6 columns">
         <p>Content for column 2</p>
      </div>
  </div>   
</div>   

</div>

You commented on cfir bitan's post about 5 years

Do not add anything fancy to topbar also. Stay true to its structure on the docs.

If you want to achieve totally different navigations on small and large views, create 2 different markup for them and use visibility classes, "hide-for-small" for desktop navigation and "show-for-small" for mobile navigation.

That will be more easy and painless..

Posts Followed

Following

  • No Content

Followers

  • No Content