Sidebar is at bottom on smaller screens - css

Question

I am using Shopisle theme. I have displayed product category drop-down filter widget on the left side of shop page. But on the smaller screens, it automatically shifts at the bottom of the page. How can it be displayed on the top in smaller screens?

Answer 1

It can be done with some javascript on the window resize event. The sidebar is really on the right side in the HTML markup (Or more specifically, it's below). It appears on the left because css has the main section floating right.
On resize, css removed the float at width 767px. So the side bar falls to the bottom.
With jQuery's insertBefore (http://api.jquery.com/insertbefore/) as well as insertAfter, the html markup can be switched.
NB: this example moves the entire sidebar. It can be modified a bit to move just a single widget if that's necessary. This indicates the general process.
**By the way, this script should be placed in a .js file for the child-theme. If a .js file is not already in place, then try adding it to the footer template file (preferably in child theme) within <script>...</script> tags.
var sidebar_at_top = false;
function formatdisplay(){
if(jQuery( window ).width() < 768){
if(!sidebar_at_top){
console.log('moving sidebar to before main area');
jQuery('.sidebar-shop').insertBefore(jQuery('.shop-with-sidebar'));
sidebar_at_top = true;
}
}else{
if(sidebar_at_top){
console.log('moving sidebar to after main area');
jQuery('.sidebar-shop').insertAfter(jQuery('.shop-with-sidebar'));
sidebar_at_top = false;
}
}
}
jQuery( window ).resize(function() {
formatdisplay();
});
jQuery( document ).ready(function() {
formatdisplay();
});