Jump to content

navigation links left - logo center - navigation links rights

Recommended Posts

  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

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!

Screenshot 2021-10-24 at 23.15.03.png

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 

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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

 

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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? 

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.