Mobile Header Problem

I have mobile header issue in my site. The search icon on mobile header disappear too slowly when scrolling down. When scrolling above it appears faster than the sticky header itselft.

please check the video to see the view the issue.
https://www.awesomescreenshot.com/video/9824129?key=6677631cb8d9aae54c579eac8b28bae0

Here is the site link https://www.discovernauts.com/en/

Any idea how to solve this ?

Hello.

I’m not sure but I think Its something related to your animation query for mobile versions.

That a bit too complex to debug with that bootstrap sticky as it clones the header to create that effect (which could have been done much simpler without cloning)…

I would probably recode the hamburger and search bar so that that they were in the same container as the middle logo as that slides away ok. However there is probably too much going on to do that. It looks as though the absolutely placed search icon has become disjointed from the fixed background probably due to a transform creating a new context,

The only quick fix I can see is to hide the icon like this.

.ast-nav-up .search-toggle button{display:none;}

That makes it better apart from when you get back to the very top. The problem when you get back to the top is that there are two headers and then one slides over the other.