Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

7.1 header - center logo + split navigation


KimWrenCo

Question

Site URL: https://chameleon-grouse-yjyf.squarespace.com/config/

I am reconstructing an existing site (originally built in Wix) for a client. Is it possible in 7.1 to have a center logo with evenly split navigation links (i.e. two to the left of the logo and two to the right of the logo)? This isn't an option in the Header Layout settings. 

I've attached an image of the desired placement result. 

Thanks! 

Kim

 

Screen Shot 2020-07-15 at 7.52.33 AM.png

Edited by KimWrenCo
clarification
Link to comment

19 answers to this question

Recommended Posts

  • 0

@tuanphan could you help me with it?

Specialising in Squarespace CSS and customisation. Always open to collaborate on projects with fellow Squarespacers so feel free to contact me if you're interested in collaborating or hiring me for some coding work.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me by buying me a coffee.

Squarespace Tips & Tricks: SquareSkills.dev (resource & tutorial site coming soon)

Design, Development & Branding: KwameAnd.co (new portfolio site coming soon)

Link to comment
  • 0
On 9/4/2020 at 6:29 PM, Kwamzilla said:

@tuanphan could you help me with it?

Can you share site url? We can check easier.

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
  • 0

Did anyone have any luck with this?

Specialising in Squarespace CSS and customisation. Always open to collaborate on projects with fellow Squarespacers so feel free to contact me if you're interested in collaborating or hiring me for some coding work.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me by buying me a coffee.

Squarespace Tips & Tricks: SquareSkills.dev (resource & tutorial site coming soon)

Design, Development & Branding: KwameAnd.co (new portfolio site coming soon)

Link to comment
  • 0

I'm trying to solve the issue by playing with the margins/padding of the navigation links - my client isn't willing to pay for a business plan so I'm relying solely on CSS.

I need to test it more thoroughly, but so far it seems to be doing the trick.

I used the following code:

// Navigation Links Spacing //
.header-nav-item:nth-child(3) a {
padding-left: 100px!important;}
.header-nav-item:nth-child(2) a {
margin-left: 0px!important;
margin-right: 450px!important;}

Screenshot 2020-10-17 at 01.46.16.png

Link to comment
  • 0
On 10/17/2020 at 7:48 AM, Webswool said:

I'm trying to solve the issue by playing with the margins/padding of the navigation links - my client isn't willing to pay for a business plan so I'm relying solely on CSS.

I need to test it more thoroughly, but so far it seems to be doing the trick.

I used the following code:

// Navigation Links Spacing //
.header-nav-item:nth-child(3) a {
padding-left: 100px!important;}
.header-nav-item:nth-child(2) a {
margin-left: 0px!important;
margin-right: 450px!important;}

You can try using position relative with negative value for left for nth-child(3), recently I solved for a member using this approach

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
  • 0
5 hours ago, mmkemp said:

hi @tuanphan,

i am trying to do this with a client site as well - is there any chance you may be able to support?

https://point-orchid-97hn.squarespace.com/

pw: rosebuds

Do you use Personal or Business Plan?

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
  • 0
16 hours ago, Tim_A_SquareSpacer said:

Hi @tuanphan, is the only way to have  Nav (left) -  logo (centre) - Nav (Right)
by using JavaScript? Any pointers would be much appreciated. Thanks.

You can use CSS, however it is time consuming

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
  • 0

I would like to do this myself. Not scared of CSS/JavaScript. Stack Overflow link is useful, but it's not clear which markup/code snippets should be added to the site Code Injection for the split navigation to work. Can someone point me in the right direction

I want three nav links, then logo, then three nav links (left to right) in header.

Link to comment
  • 0
On 1/15/2021 at 8:57 AM, CLF said:

I would like to do this myself. Not scared of CSS/JavaScript. Stack Overflow link is useful, but it's not clear which markup/code snippets should be added to the site Code Injection for the split navigation to work. Can someone point me in the right direction

I want three nav links, then logo, then three nav links (left to right) in header.

Have you solved it yet?

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

Create an account or sign in to comment

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

×
×
  • Create New...