Reply To: Search doesn't stay within my header (mobile)

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Search doesn't stay within my header (mobile) Reply To: Search doesn't stay within my header (mobile)

#16674

Ernest Marcinko
Keymaster

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