Menu icon Foundation

My Posts






My Comments

Andrew Sepic commented on Alex Laforge's post 5 months

Thank Goodness!  Was looking all over on how to call this Javascript event to tag on some animation to the Hamburger icon. 
THe docs have been updated and do have the event handlers listed properly, but I'm not savvy enough to know how to call them without the proper element and  the .on() function.  
Thanks Brian!

Andrew Sepic commented on burnersk's post 9 months

Too bad all that's happening on the Foundation Forum is spam comments :-(  

Andrew Sepic commented on shohag khan's post over 1 year

Yikes!   Spamm alert!  C'mon Admins!

Andrew Sepic commented on Andrew Sepic's post over 1 year

oh!  No love.  I've had to move my dev site live, though the mobile issue still exists. 
http://yogamalafoundation.ca
 
To Replicate the problem:

View the site on mobile or use developer tools to simulate a mobile device
Click the menu hamburger to open the off-canvas element
Click a menu item which triggers the ScrollTo event successfully, but does not close the off-canvas element

I suppose I could just hardcode some JS on top of this, but I thought there would be a more elegant solution.
 

Andrew Sepic commented on Andrew Sepic's post about 2 years

Found it!  
Because I like answering my own questions you can override how much the .off-canvas-content (the main content window) is pushed over with the following.. 
.position-left.is-open ~ .off-canvas-content
transform: translateX(320px);
 
SOO my whole media query looks like 
@media only screen and (max-width: 640px)
.off-canvas.position-left
width: 320px
.position-left.is-open ~ .off-canvas-content
transform: translateX(320px)
 
If there's any issue or potential conflict with this approach, please feel free to let me know!

Andrew Sepic commented on Andrew Sepic's post over 2 years

I'm doing a headspin @Kai Falkowksi.  I've replaced
$topbar-background: $primary;
with
$topbar-background: $primary-color;
 
And it works.  I didn't know you would have to suffix the variable name $primary  with -color. As the $foundation-palette variable does not include 'color' at the end of the variable names...
Is that in the docs somewhere that I missed?

Andrew Sepic commented on Guy Van Bael's post about 3 years

I believe Orbit in it's totality has been deprecated since version 5.5.3 
http://foundation.zurb.com/sites/docs/v/5.5.3/components/orbit.html
 
I've been using Slick Carousel/Slider as my new slider option. (linked to in the above deprecation notice).
 
EDIT***
OOOPS! - I guess Orbit is back in F6!

Andrew Sepic commented on Anthony Weare's post over 3 years

Anthony, I'm not sure that what you've written is entirely necessary. If all you want to do is outlined in your first post

"What I'm trying to do is display the template as is in anything medium up but when the page goes to a responsive design I would like the two sidebars to fall below the main content area."

Then you should be able to do that without the need of Javascript. The 2nd link I posted is perhaps a bit older and that JS code described there should be active already with Foundation.min.js and using the source ordering as outlined by Rafi in the first link I shared as well as looking at the foundation grid docs here.. http://foundation.zurb.com/docs/components/grid.html (near the bottom). You should be able to do what you need just using classes like medium-push-9 or large-pull-3.

I just got it working on a site I'm developing and one thing which sent me for a loop is that the classes work from the bottom up. So you need to imagine that your HTML needs to be designed mobile first. Having your markup display content the way you want on small screens. Then use the classes to push and pull columns on medium and large screens.

Andrew Sepic commented on Anthony Weare's post over 3 years

I was also not sure how you can do that Anthony as it's something I've run into myself. Apparently the answer is Source Ordering!

Rafi answers a similar question here. http://foundation.zurb.com/forum/posts/34720-layout-and-order-differences-small-large

And you can find out more about the principles here http://zurb.com/university/lessons/source-ordering-comes-to-rows

Andrew Sepic commented on Andrew Sepic's post almost 4 years

Hi Rafi,
Thanks for your prompt reply. It makes total sense. For some reason I just didn't think it could be that easy. I followed your suggestions and it worked like a charm.

For others who may look for the same answer here's my final header code

 <header>
  <!-- Logo & Ad space -->
  <div class="row">
    <div class="small-12 large-12 columns" id="headertopWrap">
      <div class="name">
        <h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
      </div>
      <div class="header-adspace">
        // Ads go here
      </div>
    </div><!-- .columns -->
  </div><!-- .row -->

  <!-- Starting the Top-Bar -->
  <div class="contain-to-grid">
    <nav class="top-bar" data-topbar>
        <ul class="title-area">
        <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
        </ul>
        <section class="top-bar-section">
        <?php
            wp_nav_menu();
        </section>
    </nav>
  </div><!-- .contain-to-grid -->
  <!-- End of Top-Bar -->
</header>

Posts Followed





Following

    No Content

Followers

My Posts

My Comments

You commented on Alex Laforge's post 5 months

Thank Goodness!  Was looking all over on how to call this Javascript event to tag on some animation to the Hamburger icon. 
THe docs have been updated and do have the event handlers listed properly, but I'm not savvy enough to know how to call them without the proper element and  the .on() function.  
Thanks Brian!

You commented on burnersk's post 9 months

Too bad all that's happening on the Foundation Forum is spam comments :-(  

You commented on shohag khan's post over 1 year

Yikes!   Spamm alert!  C'mon Admins!

You commented on Andrew Sepic's post over 1 year

oh!  No love.  I've had to move my dev site live, though the mobile issue still exists. 
http://yogamalafoundation.ca
 
To Replicate the problem:

View the site on mobile or use developer tools to simulate a mobile device
Click the menu hamburger to open the off-canvas element
Click a menu item which triggers the ScrollTo event successfully, but does not close the off-canvas element

I suppose I could just hardcode some JS on top of this, but I thought there would be a more elegant solution.
 

You commented on Andrew Sepic's post about 2 years

Found it!  
Because I like answering my own questions you can override how much the .off-canvas-content (the main content window) is pushed over with the following.. 
.position-left.is-open ~ .off-canvas-content
transform: translateX(320px);
 
SOO my whole media query looks like 
@media only screen and (max-width: 640px)
.off-canvas.position-left
width: 320px
.position-left.is-open ~ .off-canvas-content
transform: translateX(320px)
 
If there's any issue or potential conflict with this approach, please feel free to let me know!

You commented on Andrew Sepic's post over 2 years

I'm doing a headspin @Kai Falkowksi.  I've replaced
$topbar-background: $primary;
with
$topbar-background: $primary-color;
 
And it works.  I didn't know you would have to suffix the variable name $primary  with -color. As the $foundation-palette variable does not include 'color' at the end of the variable names...
Is that in the docs somewhere that I missed?

You commented on Guy Van Bael's post about 3 years

I believe Orbit in it's totality has been deprecated since version 5.5.3 
http://foundation.zurb.com/sites/docs/v/5.5.3/components/orbit.html
 
I've been using Slick Carousel/Slider as my new slider option. (linked to in the above deprecation notice).
 
EDIT***
OOOPS! - I guess Orbit is back in F6!

You commented on Anthony Weare's post over 3 years

Anthony, I'm not sure that what you've written is entirely necessary. If all you want to do is outlined in your first post

"What I'm trying to do is display the template as is in anything medium up but when the page goes to a responsive design I would like the two sidebars to fall below the main content area."

Then you should be able to do that without the need of Javascript. The 2nd link I posted is perhaps a bit older and that JS code described there should be active already with Foundation.min.js and using the source ordering as outlined by Rafi in the first link I shared as well as looking at the foundation grid docs here.. http://foundation.zurb.com/docs/components/grid.html (near the bottom). You should be able to do what you need just using classes like medium-push-9 or large-pull-3.

I just got it working on a site I'm developing and one thing which sent me for a loop is that the classes work from the bottom up. So you need to imagine that your HTML needs to be designed mobile first. Having your markup display content the way you want on small screens. Then use the classes to push and pull columns on medium and large screens.

You commented on Anthony Weare's post over 3 years

I was also not sure how you can do that Anthony as it's something I've run into myself. Apparently the answer is Source Ordering!

Rafi answers a similar question here. http://foundation.zurb.com/forum/posts/34720-layout-and-order-differences-small-large

And you can find out more about the principles here http://zurb.com/university/lessons/source-ordering-comes-to-rows

You commented on Andrew Sepic's post almost 4 years

Hi Rafi,
Thanks for your prompt reply. It makes total sense. For some reason I just didn't think it could be that easy. I followed your suggestions and it worked like a charm.

For others who may look for the same answer here's my final header code

 <header>
  <!-- Logo & Ad space -->
  <div class="row">
    <div class="small-12 large-12 columns" id="headertopWrap">
      <div class="name">
        <h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
      </div>
      <div class="header-adspace">
        // Ads go here
      </div>
    </div><!-- .columns -->
  </div><!-- .row -->

  <!-- Starting the Top-Bar -->
  <div class="contain-to-grid">
    <nav class="top-bar" data-topbar>
        <ul class="title-area">
        <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
        </ul>
        <section class="top-bar-section">
        <?php
            wp_nav_menu();
        </section>
    </nav>
  </div><!-- .contain-to-grid -->
  <!-- End of Top-Bar -->
</header>

Posts Followed

Following

  • No Content

Followers