How to make the width of a customized dropdown menu responsive to various devices?

Design help General
1

Hi everyone.

In my portfolio project, I have designed a dropdown menu for anchor links to flow to page sections.

My problem is that I don’t know how I can make this dropdown menu size responsive to all devices’ breakpoints. It is important, because when it comes to mobile breakpoints I want this menu to take 100% screen width for all various mobiles.

I here send a screenshot of the menu and how it looks now on different mobile devices. And also my read-only link.
PS: I am a total novice :sweat_smile:

PHOTO-2021-06-30-15-41-37
PHOTO-2021-06-30-15-41-37498×1600 42.1 KB

iPhone SE

PHOTO-2021-06-30-15-42-27
PHOTO-2021-06-30-15-42-27646×1600 46.3 KB

iPhone 12

I would appreciate any advice.

Thanks a lot :slight_smile:

Here is my site Read-Only:

https://preview.webflow.com/preview/javad-raisi-ux-portfolio?utm_medium=preview_link&utm_source=designer&utm_content=javad-raisi-ux-portfolio&preview=af716d368fac289ecf5032f6c965687d&pageId=60c21ae83c90e57b2fbb0112&workflow=preview

2

Did you ever get this working?

I am using a dropdown menu myself with 4 main headings and 8, 4, 6 and 4 items in each. Squeezing all that into a mobile phone in portrait mode seems daunting.