Hi!
I see multiple issues there.
The search shortcode is placed inside a Form element, which causes invalid HTML output and possibly malfunctioning as well – beacuse the search uses it’s own form, and a nested forms are prohibited in HTML.
The solution is to remove the container form element.
Currently the shortcode must be placed something like:
[html]<div class="col-xs-12 col-sm-12 col-md-6">
<form ….>
<?php echo do_shortcode("[wpdreams_ajaxsearchpro ...]"); ?>
</form>
</div>[/html]
and the correct layout is without the form, so something like:
[html]<div class="col-xs-12 col-sm-12 col-md-6">
<?php echo do_shortcode("[wpdreams_ajaxsearchpro ...]"); ?>
</div>[/html]
This might not solve the problem yet, because there is something else. The navigation bar is a floating element as I can see, and the “col-xs-12 col-sm-12 col-md-6” div container is not. So it just sits on top of the floating navigation bar incorrectly.
My suggestion is to use a CSS code to force a floating clear before the search is displayed:
[code].navbar:after {
content: "";
display: table;
clear: both;
}[/code]
or if that’s not working, maybe:
[code].col-xs-12.col-sm-12.col-md-6 {
clear: both;
}[/code]
I don’t know exactly, it’s not a plugin related issue, but I guess one of these should work.