Split Navigation needs to be responsive

My client is requesting a split navigation on the site (which was allowed in 7.0) and I did find CSS code that works but it is not responsive so when it's shown on a small laptop it overlaps onto and below the center logo.

It looks like the text size is causing the problem, so having a smaller or a responsive font size may help. Further adjusting the header layout may improve the situation too. 

Can you share your website URL and site wide password if it's not live?

Alternatively, you could try one of these other code options that may work better for your case?

https://schwartz-edmisten.com/blog/split-navigation-in-squarespace
https://www.will-myers.com/products/p/split-navigation

Thanks so much for the reply. The website is live, these are changes that were requested months after publishing. Here is the website URL.

https://southernsighsinn.com 

Wow, for me that's actually looking worse than your screenshot:

.header-display-desktop .header-title {
    flex: 0 0 30% !important;
    text-align: center;
}
.header-title-nav-wrapper {
    justify-content: center;
}

Changing/adding this CSS helps in my testing, but it is still not a robust solution, it quite quickly breaks on a 1200px screen.

I would be tempted to remove what you have and add one of the other solutions.

Honestly I steer away from the split nav and probably will until Squarespace add it back as a solution, I always find it messy with the way it needs coding currently.

I agree, nothing has seemed to work well and I've told my client the same. Work in progress so I hadn't taken of the CSS yet for split navigation. I was recommending they go with logo to the left and menu to the right:)

2 hours ago, ggdesign said:

I agree, nothing has seemed to work well and I've told my client the same. Work in progress so I hadn't taken of the CSS yet for split navigation. I was recommending they go with logo to the left and menu to the right:)

 

Good luck, drop me a line if you need any help