Menu icon Foundation
iOS Navigation Quirky - Top Bar

Hello - I've found similar threads but can't find a solution that works. I have a new WordPress site in dev - first project working with Foundation. WordPress v 3.8 / Foundation 4.3.2

The theme responds great, other than the navigation menu. On Android, the top bar opens and allows navigating just fine. But, on iPad / iOS, trying to use the navigation in the desktop version, the menu item opens for a brief second and disappears quickly - the dorpdown doesn't stay open allowing you to use it. When viewing portrait (and the top bar version of the nav) - the navigation top bar opens, but then the only menu items that can be clicked are the top level items, the second level nav doesn't work, you tap the top level and nothing happens / the second level doesn't appear.

I've tried adding is_hover: false as well as making sure to have data-dropdown-content defined - but neither has made a difference.

I'm copying in the nav block below, as well as code I found for integrating WP menus with Foundation - I'll post the source once I track it down.

Thank you for any insight - tips or tricks.

Best,
Jonathon

<nav class="top-bar" data-topbar data-options="is_hover: false">
    			<ul class="title-area" data-dropdown-content>
					<li class="name">
						<h1><a href="<?php echo home_url(); ?>"><div class="pct-logo"></div></a></h1>
					</li>
					<!-- 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>&nbsp;</span></a></li>
				</ul>
				<section class="top-bar-section">
				<?php foundation_top_bar_l(); ?><span class="phone">937.693.8311</span>

				<!-- <?php foundation_top_bar_r(); ?> -->
				</section>
			</nav>
            
            
----------------------------------- Found from a related site for getting WP menus into Foundation

<?php
/**
* Customize the output of menus for Foundation top bar
*/
 
class top_bar_walker extends Walker_Nav_Menu {
 
function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
$element->has_children = !empty( $children_elements[$element->ID] );
$element->classes[] = ( $element->current || $element->current_item_ancestor ) ? 'active' : '';
$element->classes[] = ( $element->has_children ) ? 'has-dropdown not-click' : '';
parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
}
function start_el( &$output, $object, $depth = 0, $args = array(), $current_object_id = 0 ) {
$item_html = '';
parent::start_el( $item_html, $object, $depth, $args );    
$output .= ( $depth == 0 ) ? '<li class="divider"></li>' : '';
$classes = empty( $object->classes ) ? array() : (array) $object->classes;	
if( in_array('label', $classes) ) {
$output .= '<li class="divider"></li>';
$item_html = preg_replace( '/<a[^>]*>(.*)<\/a>/iU', '<label>$1</label>', $item_html );
}
if ( in_array('divider', $classes) ) {
$item_html = preg_replace( '/<a[^>]*>( .* )<\/a>/iU', '', $item_html );
}
$output .= $item_html;
}
function start_lvl( &$output, $depth = 0, $args = array() ) {
$output .= "\n<ul class=\"sub-menu dropdown\">\n";
}
}
?>


----------------------------- Second file referenced for WP Menus
<?php
add_theme_support('menus');
 
/**
* Register Menus
* http://codex.wordpress.org/Function_Reference/register_nav_menus#Examples
*/
register_nav_menus(array(
'top-bar-l' => 'Left Top Bar', // registers the menu in the WordPress admin menu editor
'top-bar-r' => 'Right Top Bar'
));
 
 
/**
* Left top bar
* http://codex.wordpress.org/Function_Reference/wp_nav_menu
*/
function foundation_top_bar_l() {
wp_nav_menu(array(
'container' => false, // remove nav container
'container_class' => '', // class of container
'menu' => '', // menu name
'menu_class' => 'top-bar-menu left', // adding custom nav class
'theme_location' => 'top-bar-l', // where it's located in the theme
'before' => '', // before each link <a>
'after' => '', // after each link </a>
'link_before' => '', // before each link text
'link_after' => '', // after each link text
'depth' => 5, // limit the depth of the nav
'fallback_cb' => false, // fallback function (see below)
'walker' => new top_bar_walker()
));
}
 
/**
* Right top bar
*/
function foundation_top_bar_r() {
wp_nav_menu(array(
'container' => false, // remove nav container
'container_class' => '', // class of container
'menu' => '', // menu name
'menu_class' => 'top-bar-menu right', // adding custom nav class
'theme_location' => 'top-bar-r', // where it's located in the theme
'before' => '', // before each link <a>
'after' => '', // after each link </a>
'link_before' => '', // before each link text
'link_after' => '', // after each link text
'depth' => 5, // limit the depth of the nav
'fallback_cb' => false, // fallback function (see below)
'walker' => new top_bar_walker()
));
}
?>

wordpresstopbarmobile

Hello - I've found similar threads but can't find a solution that works. I have a new WordPress site in dev - first project working with Foundation. WordPress v 3.8 / Foundation 4.3.2

The theme responds great, other than the navigation menu. On Android, the top bar opens and allows navigating just fine. But, on iPad / iOS, trying to use the navigation in the desktop version, the menu item opens for a brief second and disappears quickly - the dorpdown doesn't stay open allowing you to use it. When viewing portrait (and the top bar version of the nav) - the navigation top bar opens, but then the only menu items that can be clicked are the top level items, the second level nav doesn't work, you tap the top level and nothing happens / the second level doesn't appear.

I've tried adding is_hover: false as well as making sure to have data-dropdown-content defined - but neither has made a difference.

I'm copying in the nav block below, as well as code I found for integrating WP menus with Foundation - I'll post the source once I track it down.

Thank you for any insight - tips or tricks.

Best,
Jonathon

<nav class="top-bar" data-topbar data-options="is_hover: false">
    			<ul class="title-area" data-dropdown-content>
					<li class="name">
						<h1><a href="<?php echo home_url(); ?>"><div class="pct-logo"></div></a></h1>
					</li>
					<!-- 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>&nbsp;</span></a></li>
				</ul>
				<section class="top-bar-section">
				<?php foundation_top_bar_l(); ?><span class="phone">937.693.8311</span>

				<!-- <?php foundation_top_bar_r(); ?> -->
				</section>
			</nav>
            
            
----------------------------------- Found from a related site for getting WP menus into Foundation

<?php
/**
* Customize the output of menus for Foundation top bar
*/
 
class top_bar_walker extends Walker_Nav_Menu {
 
function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
$element->has_children = !empty( $children_elements[$element->ID] );
$element->classes[] = ( $element->current || $element->current_item_ancestor ) ? 'active' : '';
$element->classes[] = ( $element->has_children ) ? 'has-dropdown not-click' : '';
parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
}
function start_el( &$output, $object, $depth = 0, $args = array(), $current_object_id = 0 ) {
$item_html = '';
parent::start_el( $item_html, $object, $depth, $args );    
$output .= ( $depth == 0 ) ? '<li class="divider"></li>' : '';
$classes = empty( $object->classes ) ? array() : (array) $object->classes;	
if( in_array('label', $classes) ) {
$output .= '<li class="divider"></li>';
$item_html = preg_replace( '/<a[^>]*>(.*)<\/a>/iU', '<label>$1</label>', $item_html );
}
if ( in_array('divider', $classes) ) {
$item_html = preg_replace( '/<a[^>]*>( .* )<\/a>/iU', '', $item_html );
}
$output .= $item_html;
}
function start_lvl( &$output, $depth = 0, $args = array() ) {
$output .= "\n<ul class=\"sub-menu dropdown\">\n";
}
}
?>


----------------------------- Second file referenced for WP Menus
<?php
add_theme_support('menus');
 
/**
* Register Menus
* http://codex.wordpress.org/Function_Reference/register_nav_menus#Examples
*/
register_nav_menus(array(
'top-bar-l' => 'Left Top Bar', // registers the menu in the WordPress admin menu editor
'top-bar-r' => 'Right Top Bar'
));
 
 
/**
* Left top bar
* http://codex.wordpress.org/Function_Reference/wp_nav_menu
*/
function foundation_top_bar_l() {
wp_nav_menu(array(
'container' => false, // remove nav container
'container_class' => '', // class of container
'menu' => '', // menu name
'menu_class' => 'top-bar-menu left', // adding custom nav class
'theme_location' => 'top-bar-l', // where it's located in the theme
'before' => '', // before each link <a>
'after' => '', // after each link </a>
'link_before' => '', // before each link text
'link_after' => '', // after each link text
'depth' => 5, // limit the depth of the nav
'fallback_cb' => false, // fallback function (see below)
'walker' => new top_bar_walker()
));
}
 
/**
* Right top bar
*/
function foundation_top_bar_r() {
wp_nav_menu(array(
'container' => false, // remove nav container
'container_class' => '', // class of container
'menu' => '', // menu name
'menu_class' => 'top-bar-menu right', // adding custom nav class
'theme_location' => 'top-bar-r', // where it's located in the theme
'before' => '', // before each link <a>
'after' => '', // after each link </a>
'link_before' => '', // before each link text
'link_after' => '', // after each link text
'depth' => 5, // limit the depth of the nav
'fallback_cb' => false, // fallback function (see below)
'walker' => new top_bar_walker()
));
}
?>
Shane Pike over 5 years ago

I'm having what sounds like the same issue. Just posted a reply with full details here: http://foundation.zurb.com/forum/posts/685-foundation-5-top-bar-dropdown