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)

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
  • #16652
    seb
    seb
    Participant

    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

    #16658
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

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


    #16662
    seb
    seb
    Participant
    You cannot access this content.
    #16666
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

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


    #16669
    seb
    seb
    Participant

    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.

    #16674
    Ernest Marcinko
    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 :)


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

You must be logged in to reply to this topic.