Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Support request] Search Icon Issue in Sticky Navigation

Home Forums Support Search Icon Issue in Sticky Navigation

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #478099
    Vadims

    Hello Tom,

    When sticky menu is active on desktop and I click on the search icon, search field appears directly in the sticky menu, but on mobile and tablets it does not. On mobile it automatically scrolls up to the top and doesn’t search directly in the sticky menu but in the main navigation when it is not sticky. On a tablet it doesn’t even scroll up, when I click on the search icon, sticky menu disapprears, keyaboard appears and I have to manually scroll up to the top to search.

    GP Premium 1.5.6
    #478314
    Leo
    Staff
    Customer Support

    Hi,

    Looks like it’s a bug. I’ve forwarded to Tom to have a closer look.

    Thanks for letting us know 🙂

    #478521
    Vadims

    Leo,

    thank you very much.

    #478562
    Tom
    Lead Developer
    Lead Developer

    Thanks for reporting this! I’ll get a fix out ASAP 🙂

    #478690
    Vadims

    Awesome guys, thank you.

    #486305
    Vadims

    Hello Tom,

    could you please give me a sitrep on that fix? It has been almost 2 weeks and I just wanna know if I should still be looking forward to seeing this fixed.

    Thank you

    #486617
    Tom
    Lead Developer
    Lead Developer

    Yes, we’re hoping to have this fixed in GPP 1.6, which is due out around the middle of this month.

    It’s not an easy issue to fix unfortunately, as iOS does some funky stuff when the keyboard is enabled.

    #487294
    Vadims

    Hello Tom,

    thank you very much for this update.

    Good luck with everything.

    #492612
    Tom
    Lead Developer
    Lead Developer

    This is a painful bug in iOS when you have a focused input inside a sticky element. There isn’t a great solution out there (unbelievably).

    For now, we’ve added this javascript to the plugin so it at least scrolls you to the top:

    <script>
        jQuery( document ).ready( function( $ ) {
            if ( navigator.userAgent.match( /(iPod|iPhone|iPad)/ ) ) {
                    var body = $( 'body' );
    		if ( body.hasClass( 'sticky-enabled' ) || ( body.hasClass( 'mobile-header' ) && body.hasClass( 'mobile-header-sticky' ) ) ) {
    			$( document ).on( 'focus', '.navigation-stick .search-field', function() {
    				$( 'html, body' ).animate({ scrollTop: 0 }, 'fast' );
    		  	} );
    		}
    	}
        } );
    </script>

    Great solution? Not really. Better than most of the hacky/glitchy solutions out there? I think so.

    Going forward, I’ll obviously be trying to find a more permanent solution.

    #492978
    Vadims

    Hello Tom,

    thank you very much for the update, but I am still having the same “situation” on the Ipad, do I need to add a function or something or is there going to be a theme update or does it kinda suppose to work from now on?

    Because right now everything is like it was, all good on desktop, scrolls me to the top on the Ipod, but not on the Ipad.

    Thank you

    #493060
    Tom
    Lead Developer
    Lead Developer

    The above code will be implemented in GPP 1.6.

    For now, you can copy it and paste it into the wp_footer hook in GP Hooks.

    #493080
    Vadims

    Ok, awesome, thank you very much.

    #493082
    Tom
    Lead Developer
    Lead Developer
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.