Collapse column on mobile and click button to open in pop-up

[ad_1]

Using twentytwentythree, which has a collapsible menu option by default in the header/navigation, is there a way to use existing classes to hide a column on mobile, and then click a button to toggle a pop-up screen of the column content?

Use case: for my WooCommerce
product archive, I have two columns, one of which a sidebar column with the product filter controls.

The filter controls are too large for mobile, so I want to hide them/the column by default on mobile screens. I want to toggle/open the content in an overlay pop-up after clicking a “Filter” button. The overlay pop-up will be about 90% height, so when that you click off of the overlay, the pop-up will close.

I think I can Jerry-rig something in a totally haphazard way, but does someone know of an easy way to do this using default WooCommerce and twentytwentythree blocks/css/scripts?

[ad_2]

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer