[Resolved] Mobile search appears and then disappears very quickly

[William]

Hi there,

I have a search bar on the GP theme website that slides down on click. The script for this is below:

<script>
	jQuery(document).on("click",function(){
		jQuery(".cus-icon").slideUp(300);
		jQuery("#search-icon").removeClass('active-srchh');		
	});
	jQuery(".inside-navigation").on("click",function(e){
    e.stopPropagation();
});
	jQuery(".cus-icon").on("click",function(e){
		
    e.stopPropagation();
});
	jQuery(document).ready(function(){
// 		jQuery("#search-icon").css("opacity","0.4");
		jQuery("#search-icon").on("click",function(){
			jQuery(this).toggleClass("active-srchh");
			jQuery(".cus-icon").slideToggle(400);
			jQuery(".orig").first().focus();
// 			jQuery(".cus-icon").toggleClass("active");
			
		});
    jQuery(window).scroll(function(event){
			jQuery(".cus-icon").slideUp(300);
			jQuery("#search-icon").removeClass('active-srchh');			
});
		
		
	});
	
</script>

It works perfectly fine when at the top of the website. However, when scrolling down and then scrolling back up slightly (reshow the menu since it is floating on scroll up with GP option), and you click search on the site (mobile), it appears and quickly disappears.

The code looks all right so I just wanted to know why this is occurring? The search is toggled to disappear on a scroll and it seems GP scrolls when the button is clicked? What’s strange is it’s not all devices just some (such as iOS) I’m not sure so hope you can help.

You can see the issue with a screen record video here.

Many thanks,

[Leo]

Hi William,

Where did you get that custom script from? I have a feeling that it needs to be adjusted somehow to make it compatible with the sticky navigation and hide on scroll down option.

Unfortunately this is really outside of our forum scope here though:
https://generatepress.com/what-support-includes/

Thanks for your understanding.

[William]

Hi Leo, it’s a custom piece of code – the code basically says if there is a scroll to hide the search bar. It seems that when the search shows it hides it like GP is scrolling the page without scrolling?

The other alternative is to have the menu completely sticky just for mobile and not desktop – would this be possible?

[Leo]

You are using the mobile header option so the sticky options should apply to mobile only:
https://docs.generatepress.com/article/mobile-header/#sticky

[William]

Gotcha – but when I disable the ‘Hide when scrolling down’ both desktop and mobile become completely sticky – I want desktop to hide when scrolling and mobile to be permanently sticky?

[Leo]

It shouldn’t be.

The sticky options for desktop and mobile are handled at two different places:
https://docs.generatepress.com/article/sticky-navigation/
https://docs.generatepress.com/article/mobile-header/

Can you make sure you’ve set them differently?

[William]

Ah yes gotcha, all works. Thank you so much Leo as always!

[Leo]

No problem 🙂

[Author]

Posts