[Support request] Search Icon Issue in Sticky Navigation

[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.

[Leo]

Hi,

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

Thanks for letting us know 🙂

[Vadims]

Leo,

thank you very much.

[Tom]

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

[Vadims]

Awesome guys, thank you.

[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

[Tom]

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.

[Vadims]

Hello Tom,

thank you very much for this update.

Good luck with everything.

[Tom]

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.

[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

[Tom]

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.

[Vadims]

Ok, awesome, thank you very much.

[Tom]

No problem!

[Author]

Posts