Split navigation doesn't work on safari

I've added a split navigation for a client and it looks and works great on Google Chrome, however as soon as open de website on Safari the navigation items all seem to be pushed together.

However, as soon as I hover over the services tab it fixes itself. Anyone have any experience with this or might know what is going on? 

I've added screenshots. Bottom screenshot shows what it looks like when I open the site, the top one is what it is supposed to look like.

Thanks!

Hi. What is site url? How did you add split navigation?

This is the code I'm using for the split nav

.header-nav {
    position: absolute;
    top: 80px;
    bottom: 0;
    margin-top: 0!important;
  margin-left: -10px!important;}
.header-nav-item:nth-of-type(2) {
    margin-right: 380px!important;}

.header-title-logo a {
    z-index: 1000;
    position: relative;}

url:

https://blenny-rhubarb-5lh3.squarespace.com/

password: honnef2021

On 6/29/2021 at 10:29 PM, HonnefCreative said:

This is the code I'm using for the split nav

.header-nav {
    position: absolute;
    top: 80px;
    bottom: 0;
    margin-top: 0!important;
  margin-left: -10px!important;}
.header-nav-item:nth-of-type(2) {
    margin-right: 380px!important;}

.header-title-logo a {
    z-index: 1000;
    position: relative;}

url:

https://blenny-rhubarb-5lh3.squarespace.com/

password: honnef2021

 

Hi. It looks like you changed header layout. Do you still need help?

If yes, which plan do you use? If you use a Business Plan or higher, we can use better code to make split navigation

Hi @tuanphan yes we haven't changed anything, it should still be split. We would love some better code! It will be on a business account (and currently is hosted through us).

Actually I think I fixed it, set the width: 100% under .header-nav.