Mobile menu & navigation in 7.1

Site URL: https://reindeer-minnow-pcea.squarespace.com

I had built our website www.vikasdutt.com on squarespace a couple years back. I need to change the website to allow for better categorization of images. The navigation structure that I needed were available closest on Bergen template and my redesigned site is reindeer-minnow-pcea.squarespace.com. However, I am not happy with how navigation text appears on mobile view.

• Very cluttered titles for portfolios (attached image 1). Can the font sizes be made smaller? Better still, can the menu & submenu be available as side bar as overlay on the existing page like Google maps/gmail/https://in.pinterest.com/pin/186547609537502074/  (instead of opening as a different screen)?
• If I select Style 1 under portfolio (title on hover), on mobile version, title is not visible (as you can't really hover a mouse on mobile)  (attached image 2)
• Navigation text at the bottom to move across projects is very large and not mobile friendly. I would like to reduce size of same. (attached image 3)

Any suggestions on how these could be resolved?