Editing header navigation layout

I am wanting to adjust the layout of the navigation links in my header. The templates provided in site styles do not satisfy the layout that I want and I have yet to find any code that does what I want. 

All I want to do is move "Contact" to the right side of the header and leave "Work" on the left side. I am able to add a button but the buttons do not achieve the clean look I am wanting. Does anyone have any suggestions on how to achieve this fix?

Hi,

Do you use Personal or Business Plan? Each plan needs a different solution.

Also, what is site url? We can check easier

I have a personal plan. 

Here is my URL

https://krollinsdesign.com/

On 1/21/2022 at 11:08 PM, krollins said:

I have a personal plan. 

Here is my URL

https://krollinsdesign.com/

Add to Design > Custom CSS

div.header-nav-item:nth-child(2) {
    position: absolute;
    right: 0;
    z-index: 999;
}

tuanphan, pls can i ask if you have 6 pages in the menu, does the code change? at the moment i copied the one above and the second item moves to the right

On 5/12/2022 at 7:38 AM, nataliaf said:

tuanphan, pls can i ask if you have 6 pages in the menu, does the code change? at the moment i copied the one above and the second item moves to the right

Change number 2 in the code to n+3. It should be

div.header-nav-item:nth-child(n+3) {
    position: absolute;
    right: 0;
    z-index: 999;
}

If it doesn't work, please share link to your site, we can check easier

thank you so much- i've added the code but it's not quite working- the site is https://clementine-tambourine-aws4.squarespace.com/ with pw 1234 - it will be a business account but i haven't paid to publish yet

On 5/21/2022 at 5:06 PM, nataliaf said:

thank you so much- i've added the code but it's not quite working- the site is https://clementine-tambourine-aws4.squarespace.com/ with pw 1234 - it will be a business account but i haven't paid to publish yet

If you use a Business Plan or higher, we have a better code to achieve this

First remove above code

Next, add this code to Home > 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;
}
</style>