WordPress.org

Ready to get started?Download WordPress

Forums

Icy
Drop-down menu not responding to touch on Android device (11 posts)

  1. jamminjames
    Member
    Posted 5 months ago #

    The drop down navigation menu is not responding to touch on my Android device. It does respond to a mouse click on a computer.

    Checked the style sheet and don't see anything unusual. Don't know what to do. Please help! Thanks.

    http://claritysound.net/wordpress/

  2. lorro
    Member
    Posted 5 months ago #

    Hi, Looks like your NextGen plugin is doing something to the touch screen dropdowns. See the javascript at the very bottom of your page. The plugin code is referring to page: http://claritysound.net/wordpress/wordpress/?v=1.10.2 which doesn't exist. Suggest you look at plugin settings, or maybe remove and re-install the plugin.

  3. jamminjames
    Member
    Posted 5 months ago #

    Ok, it was the WP Deferred Javascripts plugin that was doing that. But once deactivated, and that url no longer shows in the html, the select menu is still not working. So that's not the problem.

    After further testing, though, I see that it does actually work, IF you touch the very TOP line of the select menu. If I touch anywhere inside the 40 pixel high (or whatever it is) "Navigation" box, nothing happens. I have to touch the very top line, and what temporarily gets highlighted, before bringing up the menu, is a very slim, maybe 5 pixel line, that is apparently the target zone. (I've tested this with the stylus pen for more accurate touching, same result.)

    So, how can I increase that area? It should cover the whole select menu area.

    I can click anywhere in it with a mouse and it works. Just not with a touch device.

  4. lorro
    Member
    Posted 5 months ago #

    Hi, Some things to try:
    - I see the ul tag is 0 px high. Try making that the same height as the li tags with:
    #menu-menu-1 {height:49px}
    - deactivate other plugins and see if the problem persists, if not reactivate plugins one at a time
    - try http://davidpricecentralheating.co.uk/ (very simple Icy site) does this have the problem
    - does this problem occur on other Android devices - if not then its a problem with your device
    - are you able to calibrate your screen

  5. jamminjames
    Member
    Posted 5 months ago #

    Yes, it does happen with http://davidpricecentralheating.co.uk/

    The #menu-menu-1 {height:49px} has no effect.

    Looking through the settings, I don't see a way to calibrate my screen.

    Deactivating all plugins has no effect.

    I don't have another Android device to try, will see if I can get a friend to check it out.

    Is there something in the script for the mobile menu that can be adjusted?

  6. jamminjames
    Member
    Posted 5 months ago #

    I realized saying "it does happen with http://davidpricecentralheating.co.uk/" is a little vague, so, to be clear, I have the same problem with that site.

    Now, with other select menus on other themes, I do NOT have the problem. So, even if it is only an Android problem with this theme, it should be rectifiable.

  7. jamminjames
    Member
    Posted 2 months ago #

    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?

  8. lorro
    Member
    Posted 2 months ago #

    Sorry I've no idea if your analysis is right but the answer to your question is that php runs on the server and some small time later the page is displayed in the user's browser, ie too late for the php to do something different. To do what you want would require a javascript because this runs in the user's browser. The javascript could detect the user's display width and alter the DOM accordingly. I can't help thinking that's a sledgehammer for this nut and, much as I like Icy, its maybe time to consider one or two other themes.

  9. Cecivusa
    Member
    Posted 2 months ago #

    Hello! Thank you for helping.

    I am using theme twenty fourteen. When I shrink my screen to check the functionality of the website on my devices the top drop down menu icon doesnt work and doesnt display it.

    My site is http://central-monterrico.com/

    Thanks in advance!

  10. Cecivusa
    Member
    Posted 2 months ago #

    Hello! Thank you for helping.

    I am using theme twenty fourteen. When I shrink my screen to check the functionality of the website on my devices the top drop down menu icon doesnt work and doesnt display it.

    My site is http://central-monterrico.com/

    Thanks in advance!

  11. lorro
    Member
    Posted 2 months ago #

    @Cecivusa
    Your setup and solution may be different, so as advised in the Forum Welcome, please start a separate thread for your problem. Otherwise we risk getting mixed up!

Reply

You must log in to post.

About this Theme

About this Topic