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.

Here is the site link

Any idea how to solve this ?


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.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.