Streaming live at 10am (PST)

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


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;

  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?

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

  1. 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:

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

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

1 Like

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

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