Issue with split menu navigation on smaller screens

Hi, 

I am having issues with some custom code I applied to my site to split the menu navigation with the logo in the centre. 

This works well until the screen size is smaller (under 1000px wide) when the headers start to butt together and fall out of place. 

Is there a way to have the mobile header jump in before this happens? 

This is the code I used:

/*Make split navigation*/
@media screen and (min-width: 1000px){ 
.header-nav {
    position: absolute;
    top: 5px;
    bottom: 0;
    margin-top: 50px!important;
    margin-left: -100px!important;
}

Site is:
https://fox-beagle-3wxe.squarespace.com/

PW: bostock

Thanks!

Hi,

You can consider using this code. You can remove your CSS code, then we can adjust below code on your site

Hi, 

Thanks for replying. I added the code injection to the 'Header' section and removed the previous code from the custom CSS. However this is the result I got: 
Any other way to split the navigation?

Thanks, 

Jordan

Hi, 

I think I've found a work around for this by defaulting to mobile menu for smaller screens at max-width:1450px.

However, I'm now trying to work out how to keep the cart icon and re-centre the logo if you can help with that? 

Thanks,

Jordan

Solved, thanks!