Streaming live at 10am (PST)

Responsive Navigation design puzzle

As a map maker I have designed a compass rose as a navigation ‘bar’ for my new website (to be). I struggle to make this component properly responsive. I want it to scale up and down looking at the VH. The text captions and centre compass rose image scale, but not in proper relation to each other. On the ‘Test’ Page (see link below) I have two versions. The bottom right is the best version to date and is currently used on all pages. The left one is a simplified version but does not scale as good.

I am stuck and will appreciate any help.
Thank you,
Hanno

https://preview.webflow.com/preview/latitude1-f9b3ed9d9da32bac6566bbd51cb54?utm_medium=preview_link&utm_source=designer&utm_content=latitude1-f9b3ed9d9da32bac6566bbd51cb54&preview=8728366eb26cbdd2729608083979e5f6&pageId=6182e95cb1831c379da109c4&workflow=preview


Here is my site Read-Only: LINK
(how to share your site Read-Only link)