Streaming live at 10am (PST)

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

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;


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!

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

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

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.