Here is the code to always display search results block at top on mobile devices:
add_action( 'wp_enqueue_scripts', 'aws_wp_enqueue_scripts', 999 );
function aws_wp_enqueue_scripts() {
if ( ! wp_is_mobile() ) {
return;
}
$script = '
function getResultsBlockHeight( resultsBlock ) {
var $resultsBlock = jQuery( resultsBlock );
var resultsHeight = $resultsBlock.height();
if ( resultsHeight === 0 ) {
var copied_elem = $resultsBlock.clone()
.attr("id", false)
.css({visibility:"hidden", display:"block",
position:"absolute"});
jQuery("body").append(copied_elem);
resultsHeight = copied_elem.height();
copied_elem.remove();
}
return resultsHeight;
}
function aws_results_layout( styles, options ) {
var offset = options.form.offset();
var bodyOffset = jQuery(\'body\').offset();
var bodyPosition = jQuery(\'body\').css(\'position\');
var bodyHeight = jQuery(document).height();
var resultsHeight = options.resultsBlock.height();
if ( bodyPosition === \'relative\' || bodyPosition === \'absolute\' || bodyPosition === \'fixed\' ) {
styles.top = offset.top + jQuery( options.form).innerHeight() - bodyOffset.top;
styles.left = offset.left - bodyOffset.left;
} else {
styles.top = offset.top + jQuery( options.form).innerHeight();
styles.left = offset.left;
}
resultsHeight = getResultsBlockHeight( options.resultsBlock );
styles.top = styles.top - resultsHeight - jQuery(options.form).innerHeight();
return styles;
}
AwsHooks.add_filter( "aws_results_layout", aws_results_layout );
';
wp_add_inline_script( 'aws-script', $script);
wp_add_inline_script( 'aws-pro-script', $script);
}
You need to add it somewhere outside the plugins folder. For example, inside functions.php file of your theme or use some plugin for adding code snippets.
Regards
