Website - mobile menu open overlay

[babalicious-io]

Menu Open Overlay

---

MobileSm versions ↑

• default overlay with connect button
• overlay when user is connected
• user connected and dropdown menu selected

Overview

• the layout is used on all mobile versions (Sm/Md/Lg) - it's just the font and social icons size that change (and the background overlay width of course)
• dropdown menu heading color is darker than the direct links heading titles, to indicate a difference and hopefully users will get it's a dropdowm menu
• dropdown submenus are hidden pr default

MobileMd versions ↑

• default overlay with connect button
• overlay when user is connected

MobileLg versions ↑

• default overlay with connect button
• default overlay with connect button and tools dropdown menu open

Tablet // Desktop

• no changes, since they use a different layout

---

The designs are in this section:
https://www.figma.com/design/Os9UawIAetoFAqwkNKHN9j/Stampchain-web?node-id=1032-1728&m=dev&t=UxGl2DIPJV81aj7b-1

Marked 🟠 and ready for dev

[babalicious-io]

You'll find the dropdown submenus nested in sublayers in figma

[babalicious-io]

There is another figma design suggestion for mobileLg where the menu open overlay doesn't span full width, but is 480px wide and covers a portion of the device screen or browser window.

Added a yellow line to indicate the overlay width/edge ↑

The downside to the current full width overlay on mobileLg is that on larger devices (up to 1023px) there is a lot of dead space around the text chalice (left/right padding).
This will address that - if it's an important issue.

---

https://www.figma.com/design/Os9UawIAetoFAqwkNKHN9j/Stampchain-web?node-id=6948-19844&m=dev&t=UxGl2DIPJV81aj7b-1

[babalicious-io]

If I have misunderstood any layout preferences, you can easily omit links, make dropdown menus expanded or similar small stuff directly on dev site.