Nav items in each page corner

Site URL: https://libbyconnolly.com/info

Hello! Does anyone know how to create a custom nav where the menu items can be fixed into the page's corners? https://libbyconnolly.com/info

I found this tutorial for the top nav, https://www.itssevenone.com/tutorials-for-squarespace-71/second-menu-squarespace, but anytime the page is resized the links all overlap/ stack on top of each other. I can't get them to stay fixed in place. 

This is the code I'm using from the above tutorial: 

.header-layout-branding-center-nav-center .header-title-nav-wrapper 
{
  flex-basis:100%!important; align:center!important; 
  height:5vw; 
  margin-top:-2vw; 
  padding-bottom:1vw}

.header-title-logo img {
  margin-bottom:-8.5%!important;
  margin-top:4vw}

.header-nav-item:nth-child(2){
  margin-left: 75vw!important;

}

Any help is much appreciated!! Thank you so much! 

The links look good to me, WORK - INFO - MANIFESTO - FUN are in the 4 corners of the browser in a fixed position (and disappear only when the mobile navigation/burger menu appear)...

Thanks Erika! That's actually not my personal site, I am trying to make a site like that. Every time I use the code, the links overlap on the logo when the browser is resized.

Thank you!