Search results container floats above the header on mobile screen

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 Ernest Marcinko 4 years, 6 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #16348
    Rahul
    Rahul
    Participant

    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

    #16351
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #16352
    Rahul
    Rahul
    Participant
    You cannot access this content.
    #16366
    Ernest Marcinko
    Ernest Marcinko
    Keymaster
    You cannot access this content. Best,
    Ernest Marcinko

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


    #16368
    Rahul
    Rahul
    Participant

    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

    #16377
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.