Search doesn't stay within my header (mobile)

[sebParticipant]

Hi on my site

http://www.dealtique.com the search compact version does not fit in my header and as you scroll shoots around the page a lot. It should be set inside the header nicely ? I spoke to the theme guys and they dont know what to do. Could you please take a look on the mobile version and find out why it does not stay in its absolute contain (no floating).

thank you very much

[Ernest MarcinkoKeymaster]

Hi!

I have looked at the page on the URL, but I can’t see the plugin active on any of the pages. Can you please check that?

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

[sebParticipant]

You cannot access this content.

[Ernest MarcinkoKeymaster]

Hi,

Thanks for the url, it’s ok now 🙂

However, I can’t see the problem, or I can’t re-create it. I have tried to scroll up and down the page, but the search box is there, and it’s working: https://i.imgur.com/kkWbIFa.png

Do I need to do something specific?

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

[sebParticipant]

Hi,

So when you scroll down with the compact search (unclicked). On some pages it starts to drop down out of the actual header frame area, when the page is still loading and then when you go back up it is out of the header. You will need to do it on an actual mobile as on the inspect element it is not bad.

[Ernest MarcinkoKeymaster]

Hi,

I see what you mean now, but I don’t know if there is a way to fix it, at least not the way it is placed currently.

You have this custom CSS applied on the search bar:

@media only screen and (max-width: 736px) {
    #ajaxsearchpro1_1 {
    top: 5px !important;
    right: 15px !important;
    position: fixed !important;
    max-width: calc(100% - 30px) !important;
    }
}

The line “position: fixed” is the cause of the problem here. Fixed positioned elements are removed from the document flow, that means, that the search is no longer part of the menu, when this rule is applied, it hovers over it separately. So while the menu loads, the search is already loaded and displayed on the screen over the future menu position.

The only way to resolve this is to completely remove that rule, and use a bit different approach instead:

1. Instead of setting the compact box final width to “100%”, change it to a pixel value, like 320px: https://i.imgur.com/dCrqdBh.png
2. Use this custom CSS, instead of the previous one:

@media only screen and (max-width: 736px) {
    #ajaxsearchpro1_1 {
    top: -23px !important;
    right: -12px !important;
    }
}

I’m not sure if this is completely correct, but this should always open the search bar to a specific width, and keep in the absolute position as well, as part of the menu.

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

[Author]

Posts