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 3
  • Views 1.8k
  • Created
  • Last Reply

Top Posters In This Topic

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 1 year later...

I'm having the same issues as @Saania

When I'm on any other page but this homepage (https://www.whiteroan.com/home-1), these navigation links don't work unless I specify the url slug and use /home-1#glance, /home-1#partners, /home-1#team - this would be fine except every time I click those links on the 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 #glance, #partners again, the links won't work on any other page.

 

Please can anyone hlep with a solution; probably a code that allows me to use different links for the other pages or anyother solution would be really helpful.

Thanks!

- PapaJoe 

Link to comment
On 3/11/2024 at 1:13 PM, PapaJoe said:

I'm having the same issues as @Saania

When I'm on any other page but this homepage (https://www.whiteroan.com/home-1), these navigation links don't work unless I specify the url slug and use /home-1#glance, /home-1#partners, /home-1#team - this would be fine except every time I click those links on the 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 #glance, #partners again, the links won't work on any other page.

 

Please can anyone hlep with a solution; probably a code that allows me to use different links for the other pages or anyother solution would be really helpful.

Thanks!

- PapaJoe 

You can consider use 2 links, then use CSS code to hide this on Homepage, and hide another link on other pages

If you want this, I can give a quick guide to achieve this

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (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.