I have a solution for your problem, although it might not be the best one! 
Check the site I made for this topic here: https://preview.webflow.com/preview/testsiterino?preview=dca93763d66e278972ef0d0c543145d4
Okay here goes:
Step one
Have your nav div properties include these settings.
Height: 100%
Width: 100%
Position: Fixed
Display Setting: None
Step two
Make a interaction to the icon you made. Call it whatever you like.
Step three
Add a click trigger and affect your nav div with it.
First click should display block
Second click should display none
Step four
Add a new click trigger to the same interaction and affect one of the sections in your site.
First click should display none
Second click should display block
Step five
Repeat Step four until all of your sites sections, have a trigger dedicated to it.
Important! Make sure that your icon is not nested inside of a section.
That should be it.
You can play with the animation and make it cool, but this is the basics
EDIT
Playing around with it, I found out, that if you change the nav div position to Absolute, you will gain the same effect, although you can now scrool the nav menu.