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 post
  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Thanks @tuanphan - in the end I ended up cheating as the code I used above became tricky on pages where the logo wasn't hidden. Instead I've ended up utilising the email and social media elements

Posted Images

11 answers to this question

Recommended Posts

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0

Thanks @tuanphan - in the end I ended up cheating as the code I used above became tricky on pages where the logo wasn't hidden.

Instead I've ended up utilising the email and social media elements and using the header button for the contact phone number. Have attached photo. It's a simple fix but it's done the job for this particular project!

 

Screenshot 2020-10-19 at 11.06.38.png

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...