navigation links left - logo center - navigation links rights

Site URL: https://indigo-flamingo-amw3.squarespace.com/config/

Hello, 

my client wants her header to be navigation to left - logo in the middle - navigation to the right (see exact picture of what she wants) but I cannot seem to get it without CSS. Would anyone know where and what code I need to insert to get this result? Thank you in advance!

8 hours ago, mariagiuliacastellani said:

Site URL: https://indigo-flamingo-amw3.squarespace.com/config/

Hello, 

my client wants her header to be navigation to left - logo in the middle - navigation to the right (see exact picture of what she wants) but I cannot seem to get it without CSS. Would anyone know where and what code I need to insert to get this result? Thank you in advance!

Which version and template name is your site?

With 7.1, you can config it directly on Header editor

If your site is built with the previous version and some specific templates, you need having some configuration to implement it. In this case, sharing your site with the protected password makes it easier to find the solution 

Thank you so much for your help!! Ok so I managed to do it how you showed me, now the logo is in the middle. But the problem is that they still want some of the navigation links to the left and some to the right, while still including in small the shopping cart and the call to action button.

Here is the website with protected password: https://indigo-flamingo-amw3.squarespace.com/

password: londoncryo

I have created now all the navigation pages so for your understanding, they would like to have: 

On the left of the logo :

About

Services

Prices

Blog 

On the right of the logo: 

Memberships

Products

Corporate wellness

Contact 

Plus on the right corner the shopping cart and call to action botton: Book 

Let me know if you can still help! thanks a lot

On 10/25/2021 at 4:51 PM, mariagiuliacastellani said:

Thank you so much for your help!! Ok so I managed to do it how you showed me, now the logo is in the middle. But the problem is that they still want some of the navigation links to the left and some to the right, while still including in small the shopping cart and the call to action button.

Here is the website with protected password: https://indigo-flamingo-amw3.squarespace.com/

password: londoncryo

I have created now all the navigation pages so for your understanding, they would like to have: 

 

On the left of the logo :

About

Services

Prices

Blog 

 

On the right of the logo: 

Memberships

Products

 

Corporate wellness

Contact 

 

Plus on the right corner the shopping cart and call to action botton: Book 

Let me know if you can still help! thanks a lot

 

Add to Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('.header-display-desktop nav.header-nav-list').clone().insertAfter('.header-actions.header-actions--right>.showOnMobile');
})
</script>
<style>
  .header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+4) {display: none;}
.header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+5) {display: none;}
  .header-nav-item:nth-child(n+5) {
    margin-right: 1.5vw;
}
</style>

Quote

On 10/27/2021 at 2:59 PM, tuanphan said:

Add to Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('.header-display-desktop nav.header-nav-list').clone().insertAfter('.header-actions.header-actions--right>.showOnMobile');
})
</script>
<style>
  .header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+4) {display: none;}
.header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+5) {display: none;}
  .header-nav-item:nth-child(n+5) {
    margin-right: 1.5vw;
}
</style>

 

Thank you. This worked. But now on the phone it looks like this : (see picture). How can I remove that from the mobile view?  And just leave the header as it is supposed to be set for mobile view: standard sandwich menu on the left - logo in the centre - shopping cart on the right? 

On 10/29/2021 at 5:34 PM, mariagiuliacastellani said:

 

adjusted the code & sent you