Navbar Breaking - smaller breakpoint + hamburger

I wish to do a navbar just like this:
read-only link: https://preview.webflow.com/preview/client-first-better-form?utm_medium=preview_link&utm_source=designer&utm_content=client-first-better-form&preview=717d06c1cd8f604e21aff3ea3ccfd960&workflow=preview
On desktop view:

And then anything below desktop view:

But on desktop view, it seems that whenever i make the navbar-component to flexbox, it ends up destroying the vertical layout I have on tablet and smaller viewpoints, making all the links clumped up.

My read-only link:
https://preview.webflow.com/preview/scotts-beautiful-site-a9bf61?utm_medium=preview_link&utm_source=designer&utm_content=scotts-beautiful-site-a9bf61&preview=8c73a4ad2151d0bbbfb80ff3ffb97a00&workflow=preview