Splitting Page Navigation

Site URL: https://www.marcycrandle.com/

Hello,

Instead of having my page navigation on the left, I would like to have it split with my logo in the middle (and two links on either side), so it looks more like this: 

https://www.cindygardner.com/ or this https://markschall.com/

website: marcycrandle.com

password: S!teBu!ld

squarespace version 7.1

Can anyone please help? Thanks so much!

On 11/27/2021 at 9:29 AM, Blueaster said:

Site URL: https://www.marcycrandle.com/

Hello,

Instead of having my page navigation on the left, I would like to have it split with my logo in the middle (and two links on either side), so it looks more like this: 

https://www.cindygardner.com/ or this https://markschall.com/

website: marcycrandle.com

password: S!teBu!ld

squarespace version 7.1

Can anyone please help? Thanks so much!

Do you use Personal or Business plan? each plan will need a different solution.

If you do not have so much nav link, you can follow the following tutorial: 

https://stnsvn.com/blog/how-to-make-a-split-navigation-in-squarespace-71

It 's noticed that change the nth value until it meets your requirement

Hope that it can help you

17 hours ago, tuanphan said:

Do you use Personal or Business plan? each plan will need a different solution.

Hi. I have a business plan.

16 hours ago, bangank36 said:

If you do not have so much nav link, you can follow the following tutorial: 

https://stnsvn.com/blog/how-to-make-a-split-navigation-in-squarespace-71

It 's noticed that change the nth value until it meets your requirement

Hope that it can help you

Hi, thanks for the directions. I am getting it closer, but still having some trouble getting the spacing right. I will keep working at it unless anyone has any more tips? Thanks everyone for your help!

On 11/29/2021 at 8:01 AM, Blueaster said:

Hi. I have a business plan.

I usually use script/css code to achieve this. In case you want to try, you can follow

First, remove the code you added.

Next, change layout to Left Navigation - Middle Logo

Then we will check & give the new code.

in case you don't want to try new code, what problem with spacing in above code?

8 hours ago, tuanphan said:

I usually use script/css code to achieve this. In case you want to try, you can follow

First, remove the code you added.

Next, change layout to Left Navigation - Middle Logo

Then we will check & give the new code.

in case you don't want to try new code, what problem with spacing in above code?

 

 

Ok, I removed the code and changed the layout back. I didn't mind how it looked with the code I added, but ideally would like it a little further from my logo, and maybe each navigation title a little further apart from each other.

Also, I love how this site has the navigation repeated at the bottom: https://www.cindygardner.com/. Is there code that can do this?

Thanks so much. I really appreciate your help 🙂

On 11/30/2021 at 11:31 PM, Blueaster said:

Ok, I removed the code and changed the layout back. I didn't mind how it looked with the code I added, but ideally would like it a little further from my logo, and maybe each navigation title a little further apart from each other.

Also, I love how this site has the navigation repeated at the bottom: https://www.cindygardner.com/. Is there code that can do this?

Thanks so much. I really appreciate your help 🙂

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+2) {display: none;}
.header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+3) {display: none;}
  .header-nav-item:nth-child(n+3) {
    margin-right: 1.5vw;
}
.header-actions.header-actions--right * {
    opacity: 1;
    transform: unset;
}
  .header-nav-item a {
    color: #619aa9;
}
</style>

Hi @tuanphan. You are so awesome at this!!

So just to make things more complicated, when I am on my laptop, I love how the WELCOME lines up with my title "Life & Leadership Coaching". 

But when I look at it on my large monitor, it doesn't line up as nicely:

Is there a way to get it to stay the same as it looks on my laptop when I switch to my monitor?

Also, I still don't see the navigation repeating on the bottom in my footer. Was that part of the code? Sorry if it wasn't and I am jumping ahead!

Thanks again. This is so incredibly appreciated 🙂

On 12/3/2021 at 1:48 AM, Blueaster said:

Hi @tuanphan. You are so awesome at this!!

So just to make things more complicated, when I am on my laptop, I love how the WELCOME lines up with my title "Life & Leadership Coaching". 

But when I look at it on my large monitor, it doesn't line up as nicely:

Is there a way to get it to stay the same as it looks on my laptop when I switch to my monitor?

Also, I still don't see the navigation repeating on the bottom in my footer. Was that part of the code? Sorry if it wasn't and I am jumping ahead!

Thanks again. This is so incredibly appreciated 🙂

#1. Both screenshots looks same. Can you explain?

#2. You mean make all navigation items appears in footer?

Hi @tuanphan. My apologies, I haven't been very clear in my communications. I will try to be less confusing! 

Regarding the alignment of the page navigation in the header, I have indicated on the screenshots the difference I am referring to:

When I am viewing my site on my laptop (image 1), WELCOME aligns nicely with Life & Leadership Coaching. When I view my site on a large monitor (image 2), WELCOME appears super far on the left when compared with Life & Leadership Coaching. I am wondering if there is a way to have these align no matter where the site is viewed. Is this possible?

Then, what I would love to have for my site is the page navigation appearing in my footer as well, so something similar to this:

Please let me know if you have further questions. Once again, I am grateful for your help!

On 12/7/2021 at 4:33 AM, Blueaster said:

Hi @tuanphan. My apologies, I haven't been very clear in my communications. I will try to be less confusing! 

Regarding the alignment of the page navigation in the header, I have indicated on the screenshots the difference I am referring to:

When I am viewing my site on my laptop (image 1), WELCOME aligns nicely with Life & Leadership Coaching. When I view my site on a large monitor (image 2), WELCOME appears super far on the left when compared with Life & Leadership Coaching. I am wondering if there is a way to have these align no matter where the site is viewed. Is this possible?

Then, what I would love to have for my site is the page navigation appearing in my footer as well, so something similar to this:

 

Please let me know if you have further questions. Once again, I am grateful for your help!

#1. Your page content has a limit width 1400px so on large screen problem appears

Add this to Design > Custom CSS

/* remove page width limit */
#page .content-wrapper {
    max-width: 100% !important;
}

#2. I guess you can add a Text Block in Footer >> then add all links? Or what problem with Text Block?

Thank you so much @tuanphan! Everything is looking great now thanks to you!

I have one last question and then I won't keep taking up so much of your time and generosity. 

When I am on one page of my site and then click one of the other pages in the top navigation, there is a quick flash where you will see the page titles on the left of the screen before they split on either side of my logo. So, for example, if I am on my WELCOME page and click MEET MARCY, I will see WELCOME, MEET MARCY, WORK WITH MARCY, & CONTACT all flash quickly on the left of the screen before WORK WITH MARCY & CONTACT move over to the right. Is there anyway to prevent this? 
 

Thanks again 🙂

On 12/13/2021 at 5:31 AM, Blueaster said:

Thank you so much @tuanphan! Everything is looking great now thanks to you!

I have one last question and then I won't keep taking up so much of your time and generosity. 

When I am on one page of my site and then click one of the other pages in the top navigation, there is a quick flash where you will see the page titles on the left of the screen before they split on either side of my logo. So, for example, if I am on my WELCOME page and click MEET MARCY, I will see WELCOME, MEET MARCY, WORK WITH MARCY, & CONTACT all flash quickly on the left of the screen before WORK WITH MARCY & CONTACT move over to the right. Is there anyway to prevent this? 
 

Thanks again 🙂

First, remove this code

<style>
  .header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+2) {display: none;}
.header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+3) {display: none;}
  .header-nav-item:nth-child(n+3) {
    margin-right: 1.5vw;
}
.header-actions.header-actions--right * {
    opacity: 1;
    transform: unset;
}
  .header-nav-item a {
    color: #619aa9;
}
</style>

Next, add this to Design > Custom CSS

/* Fix Split Nav Flash */
  .header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+2) {display: none;}
.header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+3) {display: none;}
  .header-nav-item:nth-child(n+3) {
    margin-right: 1.5vw;
}
.header-actions.header-actions--right * {
    opacity: 1;
    transform: unset;
}
  .header-nav-item a {
    color: #619aa9;
}

@tuanphan Thank you! It's perfect! Is there anything I can do to thank you for all your help?

On 12/15/2021 at 4:53 AM, Blueaster said:

@tuanphan Thank you! It's perfect! Is there anything I can do to thank you for all your help?

No problem. If you have any other problems, just reply here or create new topic.

Hello @tuanphan I had code that did not work in Firefox or Safari, but I replaced it with your code above and it seems to work.

I've been trying to play around with the styling as I want it to look similar to the code I had previously but am having some issues.

https://ck-option-1.squarespace.com/

password: CK2022!

What I want it to look like: (Just a bit more evenly spread and not over to the left as much, but don't want it to overcrowd when the screen size changes)

What it looks like with your code: Just too much space between the logo and page links.

Let me know if you can help! Thank you!

6 hours ago, BridgetKelley said:

Hello @tuanphan I had code that did not work in Firefox or Safari, but I replaced it with your code above and it seems to work.

I've been trying to play around with the styling as I want it to look similar to the code I had previously but am having some issues.

https://ck-option-1.squarespace.com/

password: CK2022!

What I want it to look like: (Just a bit more evenly spread and not over to the left as much, but don't want it to overcrowd when the screen size changes)

 

What it looks like with your code: Just too much space between the logo and page links.

 

Let me know if you can help! Thank you!

Add to Design > Custom CSS

/* left right menu align */
.header-nav-wrapper {
    text-align: right;
}
.header-actions.header-actions--right {
    justify-content: flex-start;
}

@tuanphan This worked perfectly for my website. My only problem is it looks wonky on tablet. Is there a way to fix that? Thanks!

Website: https://boat-fools.squarespace.com

PW: boats

On 2/14/2023 at 1:06 AM, Nora-Creative said:

@tuanphan This worked perfectly for my website. My only problem is it looks wonky on tablet. Is there a way to fix that? Thanks!

Website: https://boat-fools.squarespace.com

PW: boats

Tablet looks fine. Can you take a screenshot on your end?