Menu icon Foundation

My Posts


My Comments

Roger Coathup commented on Nick Ayeh's post almost 5 years

Have updated to 5.4.7 -- code bloat (duplicated CSS) in app.css is still a problem.

Compass build -- Codekit for compilation

Roger Coathup commented on Will Jayroe's post almost 5 years

We also had this problem with Compass builds -- We've switched most of our Foundation projects to libsass to avoid the problems, but had one project that needed Compass.

The fix above corrects the missing styles problem, but does bloat the app.css file, making it impossible to work with in Safari developer tools.

Roger Coathup commented on Roger Coathup's post almost 5 years

fixed again -- had a config.rb left over from compass setup.

Removed that, and compiled correctly.

Roger Coathup commented on Roger Coathup's post almost 5 years

Updated another site, and same problem.

This switching the compiler to libsass has not fixed the problem.

Any thoughts?

Roger Coathup commented on Chris M's post almost 5 years

I'm not familiar with FoundationPress, but build plenty of sites with WordPress and Fondation.

For nav menu compatibility (including dropdowns), I define the following Walker and filter (in functions.php):

/**
 * Embassy_Walker_Nav_Menu class.
 * 
 * @extends Walker_Nav_Menu
 */
class Embassy_Walker_Nav_Menu extends Walker_Nav_Menu {

  function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class=\"dropdown\">\n";
  }
}

add_filter( 'wp_nav_menu_objects', 'embassy_menu_parent_class' );

/**
 * embassy_menu_parent_class function.
 * 
 * @access public
 * @param mixed $items
 * @return void
 */
function embassy_menu_parent_class( $items ) {

  $parents = array();
  foreach ( $items as $item ) {
    if ( $item->menu_item_parent && $item->menu_item_parent > 0 ) {
      $parents[] = $item->menu_item_parent;
    }
  }

  foreach ( $items as $item ) {
    if ( in_array( $item->ID, $parents ) ) {
      $item->classes[] = 'has-dropdown'; 
    }
  }

  return $items;    
}

And then call the menu using:

<section class="top-bar-section">

<?php
wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu left', 'container' => '', 'walker' => new Embassy_Walker_Nav_Menu ) );?>  

</section>

Roger Coathup commented on Roger Coathup's post almost 5 years

Update.

I switched the compiler in Codekit to libsass, and that appears to have corrected the problem.

Roger Coathup commented on Breno Braga's post about 5 years

This problem has been reported elsewhere, and we encountered the same problem.

The markup requirement has changed in 5.3.3, you need to add 'data-offcanvas' to your wrap div, e.g.

<div class="off-canvas-wrap" data-offcanvas>

Roger Coathup commented on Scott Howell's post over 5 years

Thanks Brandon, that fixed the problem. Any news on whether this will default in the future?

Roger Coathup commented on Scott Howell's post over 5 years

@Rafi -- my code was correct, and illustrates the problem.

I want to have 3 columns on one of the tabs -- and that's the thing that doesn't work correctly. Foundation isn't calculating the column widths correctly when they are on a tab.

Roger Coathup commented on Scott Howell's post over 5 years

We are experiencing similar problems -- it appears tabs 'calculate' their width to the width of the widest content in the tab, and not to the width of the tabbed area -- so, columns are a percentage of the width of the widest element, and not a percentage of the width of the tab.

e.g. with the following code the columns won't go full width of the tab:

<dl class="tabs" data-tab>
  <dd class="active"><a href="#panel2-1">Tab 1</a></dd>
  <dd><a href="#panel2-2">Tab 2</a></dd>
</dl>
<div class="tabs-content">
  <div class="content active" id="panel2-1">
    <div class="row">
       <div class="small-4 columns">
            col 1
       </div>
       <div class="small-4 columns">
            col 2
       </div> 
      <div class="small-4 columns">
            col 3
       </div>   
    </div> 
  </div>
  <div class="content" id="panel2-2">
    <p>Second panel content goes here...</p>
  </div>

</div>

However, if you add a 'wide' paragraph into tab 1, the columns will go as wide as the paragraph, e.g.:

...
<div class="content active" id="panel2-1">
    <p>some 'wide' text taking up more width, and letting our columns get wider in sid ethe tab</p>
    <div class="row">
       <div class="small-4 columns">
            col 1
       </div>
       <div class="small-4 columns">
            col 2
       </div> 
      <div class="small-4 columns">
            col 3
       </div>   
    </div>
... 

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Nick Ayeh's post almost 5 years

Have updated to 5.4.7 -- code bloat (duplicated CSS) in app.css is still a problem.

Compass build -- Codekit for compilation

You commented on Will Jayroe's post almost 5 years

We also had this problem with Compass builds -- We've switched most of our Foundation projects to libsass to avoid the problems, but had one project that needed Compass.

The fix above corrects the missing styles problem, but does bloat the app.css file, making it impossible to work with in Safari developer tools.

You commented on Roger Coathup's post almost 5 years

fixed again -- had a config.rb left over from compass setup.

Removed that, and compiled correctly.

You commented on Roger Coathup's post almost 5 years

Updated another site, and same problem.

This switching the compiler to libsass has not fixed the problem.

Any thoughts?

You commented on Chris M's post almost 5 years

I'm not familiar with FoundationPress, but build plenty of sites with WordPress and Fondation.

For nav menu compatibility (including dropdowns), I define the following Walker and filter (in functions.php):

/**
 * Embassy_Walker_Nav_Menu class.
 * 
 * @extends Walker_Nav_Menu
 */
class Embassy_Walker_Nav_Menu extends Walker_Nav_Menu {

  function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class=\"dropdown\">\n";
  }
}

add_filter( 'wp_nav_menu_objects', 'embassy_menu_parent_class' );

/**
 * embassy_menu_parent_class function.
 * 
 * @access public
 * @param mixed $items
 * @return void
 */
function embassy_menu_parent_class( $items ) {

  $parents = array();
  foreach ( $items as $item ) {
    if ( $item->menu_item_parent && $item->menu_item_parent > 0 ) {
      $parents[] = $item->menu_item_parent;
    }
  }

  foreach ( $items as $item ) {
    if ( in_array( $item->ID, $parents ) ) {
      $item->classes[] = 'has-dropdown'; 
    }
  }

  return $items;    
}

And then call the menu using:

<section class="top-bar-section">

<?php
wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu left', 'container' => '', 'walker' => new Embassy_Walker_Nav_Menu ) );?>  

</section>

You commented on Roger Coathup's post almost 5 years

Update.

I switched the compiler in Codekit to libsass, and that appears to have corrected the problem.

You commented on Breno Braga's post about 5 years

This problem has been reported elsewhere, and we encountered the same problem.

The markup requirement has changed in 5.3.3, you need to add 'data-offcanvas' to your wrap div, e.g.

<div class="off-canvas-wrap" data-offcanvas>

You commented on Scott Howell's post over 5 years

Thanks Brandon, that fixed the problem. Any news on whether this will default in the future?

You commented on Scott Howell's post over 5 years

@Rafi -- my code was correct, and illustrates the problem.

I want to have 3 columns on one of the tabs -- and that's the thing that doesn't work correctly. Foundation isn't calculating the column widths correctly when they are on a tab.

You commented on Scott Howell's post over 5 years

We are experiencing similar problems -- it appears tabs 'calculate' their width to the width of the widest content in the tab, and not to the width of the tabbed area -- so, columns are a percentage of the width of the widest element, and not a percentage of the width of the tab.

e.g. with the following code the columns won't go full width of the tab:

<dl class="tabs" data-tab>
  <dd class="active"><a href="#panel2-1">Tab 1</a></dd>
  <dd><a href="#panel2-2">Tab 2</a></dd>
</dl>
<div class="tabs-content">
  <div class="content active" id="panel2-1">
    <div class="row">
       <div class="small-4 columns">
            col 1
       </div>
       <div class="small-4 columns">
            col 2
       </div> 
      <div class="small-4 columns">
            col 3
       </div>   
    </div> 
  </div>
  <div class="content" id="panel2-2">
    <p>Second panel content goes here...</p>
  </div>

</div>

However, if you add a 'wide' paragraph into tab 1, the columns will go as wide as the paragraph, e.g.:

...
<div class="content active" id="panel2-1">
    <p>some 'wide' text taking up more width, and letting our columns get wider in sid ethe tab</p>
    <div class="row">
       <div class="small-4 columns">
            col 1
       </div>
       <div class="small-4 columns">
            col 2
       </div> 
      <div class="small-4 columns">
            col 3
       </div>   
    </div>
... 

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content