Filter Bar --- what am I doing wrong here…?

Design help General
1

Hi…!

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;

Modern%20Home%20-%20Desktop
Modern%20Home%20-%20Desktop4069×1709 1.82 MB

and here is the mobile one;

Modern%20Home%20-%20Mobile
Modern%20Home%20-%20Mobile3126×5558 550 KB

  1. Layout - what’s the best way to design this on desktop mode, so that it converts beautifully on the all other views?

  2. 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

  3. Swatches – should I set them up as images or as background images?

37%20AM
37%20AM1562×282 82.8 KB

  1. Mobile Swatches Distortion - When the color circles are clicked, they look better, initially thought they look like below. What gives?

40%20AM
40%20AM824×228 53 KB

  1. Size of Wrapper – The height is stuck at 100px – I changed the size, any reason?

39%20AM
39%20AM3572×1550 860 KB

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!

Bless!
Ash

Here is my site Read-Only:
https://preview.webflow.com/preview/modern-home-0a914027fd6cc42cd38e74?utm_medium=preview_link&utm_source=designer&utm_content=modern-home-0a914027fd6cc42cd38e74&preview=f2943384bb22665155ad97065251458d&pageId=5dccbe4f046a8afa9df28143&itemId=5dccbe4f046a8a11a5f2818d&mode=preview

2

Anyone here, who can tip me in how to work this…?
Thanx!

3

I’d be willing to help via Zoom or something (screen share). Would be much easier I think.

1 Like
4

Is the Nav_Wrapper2 suppose to remain below the navbar like that? Or are you wanting this to show when a Navbar item is clicked (ex. Dropdown)?

1 Like
5

Yes, the wrapper is suppose to stay open unless Menu Tabs are clicked on.