Turn Tabs Into a Dropdown Menu on Mobile

nevermind I found the device preview on the bottom on the view! Amazing idea thank you for this

Can anyone tell me why the text dropdown functionality that @pixelgeek so kindly laid out isn’t working for me? I swear I’ve followed his tutorial 4 times now! Here are a couple screenshots and my public share link. Thanks for any help!

Screen Shot 2020-06-10 at 11.29.07 AM
Screen Shot 2020-06-10 at 11.29.18 AM
https://preview.webflow.com/preview/cambrian?utm_medium=preview_link&utm_source=designer&utm_content=cambrian&preview=3473e116de7887e460bda8085035eeee&pageId=5ed93ad10c84ff020af691df&mode=preview

Nevvermind! I used to have the ‘new tab link’ as ‘New Tab Link’, so my code was ‘New-Tab-Link’. That’s the only thing I changed, and now it works!

Um…was that it? No capitals in JS?

This is great, thank you!

No, that is because class names are lowercase with no spaces. Webflow lets you but then it is converted on publish.

Hey @SiavashVJ - idk if you’re still interested, but I put together a no-code solution to this effect. Hope this helps!

1 Like

Wow! Nicely done! Care to share how?

Hello @superhumble,
Could you share the read only link?

My apologies for the delay @SiavashVJ & @Gabriel_Hajdok

Read-only → No-Code Tabs Dropdown

The project is now able to be cloned also.

1 Like

@PixelGeek - Hey Nelson,

I wanted to share this with you guys, we figured out a no-code solution for the same situation, hope you find it useful! Stoked to be able to contribute!

No Code Tab Dropdown w/ changing tab heading

best,

Aaron
superhumble.co

1 Like

Hey guys, this is awesome!

In my design, I want my mobile tab dropdown to have a hamburger nav, which opens out into an X for the user to click out of the dropdown again.

So, I want the user to be able to close the dropdown via both the hamburger/open trigger, and via the tab links.

In @PixelGeek’s design the tab menu is only able to be closed using the tab links, and in @cpjackman 's design the menu can be closed using the tab dropdown but I can’t seem to replicate this…

The problem in mine is that with the open and close interaction set on one element (the hamburger) and the close interaction set on another (the tab menu), the interactions don’t get a chance to ‘reset’ so my hamburger is stuck with the X

Any interactions geniuses able to figure out if this is even a possibility using the tabs component? :pray:

Hopefully the description make sense but here’s a a mockup of the problem: https://preview.webflow.com/preview/test-triggersss?utm_medium=preview_link&utm_source=designer&utm_content=test-triggersss&preview=07117941aa5b7a04626ec45459a825b5&mode=preview

A post was split to a new topic: Dropdown isn’t closing when the tab link is selected