[Resolved] Display right sidebar in mobile view below header

[Levi]

Hi I am trying to display a right sidebar widget below the header in mobile view only.

I found some code that displays the right sidebar above the header but I am trying to get it below the header as it is a filter widget.

@media (max-width: 768px) {

#wc-column-container {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
	
#right-sidebar {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}

.content-area {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
}

}

any ideas? thanks in advance

[Levi]

here is a link to the site and an image of what i am trying to do

site: https://proappliancstg.wpengine.com/model/insinkerator-evolution-pro-cover-control-plus/
image: https://ibb.co/52cYVgF

thanks

[Ying]

Hi Levi,

It’s not possible to move the sidebar into the content area.

You can try hiding the sidebar on mobile using CSS, then add a block element to insert the filter only for mobile, you can try this hook:woocommerce_before_shop_loop.

[Levi]

got it to work with the hook

thank you!!

[Ying]

Awesome! Glad you figured it out 🙂

[Author]

Posts