I’m struggling with designing this ‘filter’ mega (drop-down) menu.
Below are mock ups of I what am looking to accomplish, both in desktop and mobile.
This is the desktop version;
and here is the mobile one;
Layout - what’s the best way to design this on desktop mode, so that it converts beautifully on the all other views?
Filters - on desktop, we have 3 filter options, (1) Shape (2) Material (3) Color – on mobile view I only need (1) Shape & (3) Color Filters
Swatches – should I set them up as images or as background images?
- Mobile Swatches Distortion - When the color circles are clicked, they look better, initially thought they look like below. What gives?
- Size of Wrapper – The height is stuck at 100px – I changed the size, any reason?
Kindly take a look at the shared link below, and LMK your thoughts and expertise.
I greatly appreciate any help as I’ve been stuck for hours with this.
Thanking you in advance!
Here is my site Read-Only: