How to stop menu headers collide in custom coded split navigation

Hi, hoping someone can help! 

https://fox-beagle-3wxe.squarespace.com/
pw: bostock

This is working as it should in Chrome but having issues with the menu headers overlapping at smaller screensizes in Safari. See attached screenshots below. 

I have used a custom code to split the navigation items between the logo and then at smaller screensizes have added code to show the overlay mobile menu to avoid the headers overlapping. This works in Chrome, but having issues with Safari!

Any help would be appreciated!

Thanks

It looks like you figured it out? I checked on some screen sizes & it looks fine