Jump to content

Splitting Page Navigation

Recommended Posts

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.

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

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

image.thumb.png.fd7293676c77e6db06adf96e56f412ec.png

Hope that it can help you

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

image.thumb.png.fd7293676c77e6db06adf96e56f412ec.png

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!

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

 

 

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
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 🙂

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

image.thumb.png.253a647b3495ef76793e619a5b434251.png

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

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". 

image.thumb.png.9fdcfe4a74690871f210cde53ee3b799.png

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

image.png.0ec636ba6c5619e7204d335ecd50e0de.png

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 🙂

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

image.thumb.png.9fdcfe4a74690871f210cde53ee3b799.png

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

image.png.0ec636ba6c5619e7204d335ecd50e0de.png

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?

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

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:

alignment.thumb.jpg.5cb26c5ba63a9ebab34c2f357639fa07.jpg

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:

 

footer.jpg.fc325c0824b63b4c4c76ec65f337c51a.jpg

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

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

alignment.thumb.jpg.5cb26c5ba63a9ebab34c2f357639fa07.jpg

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:

 

footer.jpg.fc325c0824b63b4c4c76ec65f337c51a.jpg

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?

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

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 🙂

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

 

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
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.

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
  • 6 months later...

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)

image.thumb.png.4b807a01dbf8bfd0f7c4690fabaf3829.png

 

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

image.thumb.png.0f06ad91c3a8d79892198b02c20c8fdd.png

 

Let me know if you can help! Thank you!

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

image.thumb.png.4b807a01dbf8bfd0f7c4690fabaf3829.png

 

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

image.thumb.png.0f06ad91c3a8d79892198b02c20c8fdd.png

 

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;
}

 

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...

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.