Jump to content

How to get different navigation links for different pages on Squarespace 7.1?

Recommended Posts

Hey, so I finally figured out how to do same page navigation using code block anchor links and smooth scroll on my homepage. Right now, the navigation for "about" and "projects" all link to their respective anchor links on the homepage by linking to #about, #projects. But when I'm on any other page but my homepage, these navigation links don't work unless I specify the url slug and use /home#about, /home#projects - this would be fine except every time I click those links on my homepage, it doesn't smooth scroll down to the right section but will refresh the page first then scroll down. I don't want it to refresh when I'm already on the homepage but if I change it back to #about, #projects again, the links won't work on any other page.

To better understand my issue, you can click the "contact" link in my navigation menu (it currently uses /home#contact) and you will see that it refreshes the page first before scrolling down to it. Meanwhile "about" and "projects" are using #about and #projects only, which will work as intended on the homepage but not when you're on a different page e.g. https://www.saaniajamal.com/presentations.

Ideally, if I could just have different navigation links for the homepage and all other pages, this issue wouldn't even exist. But I've spent hours finding a solution and have reached a dead end. For the record, I am on the individual plan, not the business one so I can't mess with Javascript unless I upgrade. PLEASE SEND HELP SO MY PORTFOLIO CAN GO LIVE SOON.

 

 

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

6 hours ago, Saania said:

Hey, so I finally figured out how to do same page navigation using code block anchor links and smooth scroll on my homepage. Right now, the navigation for "about" and "projects" all link to their respective anchor links on the homepage by linking to #about, #projects. But when I'm on any other page but my homepage, these navigation links don't work unless I specify the url slug and use /home#about, /home#projects - this would be fine except every time I click those links on my homepage, it doesn't smooth scroll down to the right section but will refresh the page first then scroll down. I don't want it to refresh when I'm already on the homepage but if I change it back to #about, #projects again, the links won't work on any other page.

To better understand my issue, you can click the "contact" link in my navigation menu (it currently uses /home#contact) and you will see that it refreshes the page first before scrolling down to it. Meanwhile "about" and "projects" are using #about and #projects only, which will work as intended on the homepage but not when you're on a different page e.g. https://www.saaniajamal.com/presentations.

Ideally, if I could just have different navigation links for the homepage and all other pages, this issue wouldn't even exist. But I've spent hours finding a solution and have reached a dead end. For the record, I am on the individual plan, not the business one so I can't mess with Javascript unless I upgrade. PLEASE SEND HELP SO MY PORTFOLIO CAN GO LIVE SOON.

 

 

You can try the solution on this link: https://www.rebeccagracedesigns.com/blog/anchor-links-squarespace

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, Lightbox Studio plugin
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

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.