Reply To: website shifts position when using exsisting search field

[Ernest MarcinkoKeymaster]

Hi!

I think I see why the website shifts 🙂 It’s actually a weird coincidence. Something besides the plugin adds an additional class to the document body, called “fixfixed”. This CSS class is also used by ajax search pro, but it has a different definition. The fix is very easy. Just use this CSS code:

.fixfixed {
    position: inherit !important;
}

You can either add this to the custom CSS section of your theme, or use the Theme Options -> Custom CSS panel on the search instance options.

As for the placement: It’s extremely hard to tell which file and where to exactly edit, as there are over 15 million different themes out there, and each one is using a different codebase. Therefore I would really love to give you clear step-by-step instructions, but it’s just simply not possible. It would require for me to know the source code of all the versions of all the themes out there.

Based on what I can see the current search bar is placed in a div container, possibly in the header.php file in your theme directory ( wp-content/themes/{your theme name}/ ). It’s most likely there, but it varies from theme to theme. I would look for this code fragment in the header.php file:

<div id="search-box">
     ......
</div>

or something very similar. Inbetween the div tags there is either a PHP function or more HTML code, I can’t tell from the page source, but it does not matter anyways.

After locating this fragment, I would try changing it to something like:

<div id="search-box">
     <?php echo do_shortcode('&#91;wpdreams_ajaxsearchpro id=1&#93;'); ?>
</div>

Make sure the id in the shortcode corresponds with the search ID you have created. If you created one, then it’s probably 1: https://i.imgur.com/B6sjrRh.png

Then save the file and see what happens. There is a good chance it’s still going to be misalignment or incorrect width, as the site header was probably built for that exact search form. Based on the first look, I would also use this custom CSS code on the search-box container to make sure the width is not exceeding 100%:

#search-box {
     max-width: 300px;
}

This is as much as I can do after the first look.

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