Split Navigation flushed to the edge of the page

Site URL: https://papaya-plums-lrzm.squarespace.com/

Hello, 

I've created a split navigation on the website I'm working on. Essentially I would like the items left of the logo to be flushed to the left of the page, and the items on the right side of the logo to be flushed to the right side of the page. What's the best way to achieve this?

Website is: 

https://papaya-plums-lrzm.squarespace.com/

password: lucyinthesky

And attached is a screenshot of the design I'm trying to achieve. 

Thanks in advance!

I see they overlap here. 

Can you disable temporarily your code? I think we can test & give the better code

Sure - I removed the split navigation code that I was using, if that helps?

9 hours ago, holahannah said:

Sure - I removed the split navigation code that I was using, if that helps?

THank you. Can you change header layout to Left Nav - Middle Logo? Then I will give code to split half of navigation and move to right

@tuanphan Thank you so much! Have changed the header layout to Left Nav - Middle Logo. 

13 hours ago, holahannah said:

@tuanphan Thank you so much! Have changed the header layout to Left Nav - Middle Logo. 

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('nav.header-nav-list').clone().insertBefore('.header-actions.header-actions--right>.showOnMobile');
	});
	</script>
<style>
  .header-nav nav>div:nth-child(n+4) {
    display: none;
}
.header-actions.header-actions--right>nav>div:nth-child(-n+3) {
    display: none;
}
.header-actions.header-actions--right>nav:nth-child(2) {
    display: none;
}
.header-nav-item:not(:last-child) {
    margin-right: 1.5vw;
}
  div.header-nav-item a {
    color: white;
}
</style>

Amazing, that worked - thanks so much!

Hi @tuanphan, do you know if there is a way to hide the navigation items from the mobile version - ideally just want the navigation to display when the hamburger menu is open. Thanks!

On 7/3/2022 at 8:09 AM, holahannah said:

Hi @tuanphan, do you know if there is a way to hide the navigation items from the mobile version - ideally just want the navigation to display when the hamburger menu is open. Thanks!

Add this code under

<style>
  @media screen and (max-width:991px) {
  nav.header-nav-list {
    display: none;
}
  }
</style>