Search results container floats above the header on mobile screen

[RahulParticipant]

Hi

everything is fine except one thing that’s not going well with my site and your plugin,

The search results container floats above the header if a user scrolls to top as my header is fixed I am facing this issue particularly on the small screens mobile phones etc,

I want a minimum thing not anything fancy till it works smoothly like search works on Amazon for an Example

See the only issue is it shouldn’t go above the header on scroll

I read comments on codecanyon and your knowledge base before I could open the ticked couldn’t find anything in relation to this.

Hope you could get back to me with a resolution this could be a setting maybe i haven’t seen it or a custom css I neee to add this to stop this from scrolling over the header.

Once you check it the results end in scroll if still I scroll up it goes over the header

One thing more the lens icon doesn’t has dimensions it Bloated on full size during the page loads.

Thanks & Regards

Rahul Kharbanda

[Ernest MarcinkoKeymaster]

Hi!

I have checked the URL on multiple devices, but it looks okay to me, I see this: https://i.imgur.com/Avf1MpY.jpg
Is this not correct? Let me know!

The ‘flash’ during the page load is probably because there is a minification active on your site, that appends the stylesheet file to the bottom of the page. The minification is not an issue, but the CSS file should not be in the footer, unless it is not that important to load within the header. This phenomenon is called the Flash of Unstyled Content aka FOUC.
So while that last CSS file loads on the end of your page, there are no initial styles whatsoever in the header, that would prevent the form from displaying before the CSS is loaded. A possible resolution is to either move that CSS file from the footer, or add a small custom CSS to the header of the site as inline CSS to prevent the FOUC.

Try this one, but make sure that this is within the header, as an inline CSS:

.asp_m {
    height: 0px;
}

This will change the search bar height to 0 pixels initially (essentially invisible), and when the last CSS file loads with the original search style, this is automatically overridden by a higher specificity CSS rule (changing the height to ‘auto’), so the search should pop as styled afterwards.

I hope this helps!

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[RahulParticipant]

You cannot access this content.

[Ernest MarcinkoKeymaster]

You cannot access this content. Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[RahulParticipant]

Hi Ernest,

I have granted the Access to the same , Sorry for the same you can now view the same and reply me back .

With Warm Regards,

Rahul

[Ernest MarcinkoKeymaster]

Hi!

I see what you mean now 🙂

It is actually intentional, there is a delay between the windows scroll and the result follow method, to prevent unneccessary client browser script usage.
You can actually change the z-index of the results here: https://i.imgur.com/7mlYyBE.png
I tested z-index value 1 on your site via the browser debugger, it moves the results behind the menu, so changing it to 1 should do the trick.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts