Home › Forums › Product Support Forums › Ajax Search Pro for WordPress Support › Search results container floats above the header on mobile screen
This topic contains 5 replies, has 2 voices, and was last updated by Ernest Marcinko 5 years, 10 months ago.
- AuthorPosts
- January 17, 2018 at 8:26 pm #16348
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
January 17, 2018 at 9:09 pm #16351Hi!
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 :)
January 17, 2018 at 9:36 pm #16352You cannot access this content.January 18, 2018 at 11:21 am #16366You cannot access this content. Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
January 18, 2018 at 12:07 pm #16368Hi 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
January 18, 2018 at 4:06 pm #16377Hi!
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.
Best,
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.
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
- AuthorPosts
You must be logged in to reply to this topic.