Ok, digging around some more on this, I notice that there are two ‘container’ divs being created in the dropdown menu. As I said above, the problem is that you must touch the very TOP line of the select menu for it to drop down. That is the top ‘container’ div, it’s effectively about 5-8 pixels high (haven’t measured it). The other ‘container’ div holds the rest of the dropdown menu, and does NOT respond to touch.
I noticed that in your core.php, you have this code:
/**
* Output primary navigation in header.
*
* @since 1.0
*
* @uses wwl_walker_nav_menu_dropdown() Change markup for mobile menu
*/
function wwl_primary_navigation() {
echo '<nav class="nav nav-primary">';
wp_nav_menu( array(
'theme_location' => 'primary',
'fallback_cb' => false,
'container' => 'div',
'container_class' => 'container',
'menu' => 'ul',
'menu_class' => 'menu',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
) );
$mobile_wrap = '<span class="mobile-menu-text">Navigation</span><i class="mobile-menu-icon icon-menu"></i>
<select class="mobile-menu">
<option value="">Navigation</option>
%3$s
</select>';
wp_nav_menu(array(
'theme_location' => 'primary',
'fallback_cb' => false,
'walker' => new wwl_walker_nav_menu_dropdown(),
'items_wrap' => $mobile_wrap,
'container' => 'div',
'container_class' => 'container',
));
echo '</nav>';
}
add_action( 'wwl_header', 'wwl_primary_navigation' );
This is the code creating the two ‘container’ divs. What needs to happen, I think, is for one or the other to be created, not both ‘container’ divs. Is there a way to couch the above code in an “if” statement, so that when it goes into the mobile mode, only one div is created, and it responds to touch?
