Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
DaImp

Harris template - turning navigation links into anchor links

Question

Is there any way to turn the template generated navigation links into anchor links?
So instead of opening a new page, the site jumps down the page to the anchor link. I am using the Harris template and my client has decided he wants it to be a single page site, without secondary pages. Is there any way I can achieve this? I have currently added text links to the body of the website to act as the navigation and hidden the template generated navigation. Ideally though I want the navigation to be in the navigation bar and not in the site body. 

link is here:
https://koi-tuba-ck62.squarespace.com/
PW: HaefeleSugaree

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 1

You put the actual pages in the Not Linked section and then add Links to them in the main navigation. 

 

image.png.9f0d9578305cd667c277df274e241d10.png


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

Awesome! That works great.

It's rather obvious now that it has been explained to me!

Thank you 😁

Share this post


Link to post
  • 0

I do have a follow up question:

While the links work great in desktop, the anchor link code does not work in mobile (from the hamburger drop down). 

Is this something that can also be fixed?

Share this post


Link to post
  • 0

Yeah - rather than just /#purpose you can use /home#purpose

However, this has the disadvantage of reloading the page rather than just scooting down to the anchor point. 

If you're happy with coding you could leave the desktop links as they currently are and modify the mobile ones to contain /home#whatever


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

So, using /home#ourpurpose does not work on mobile or desktop. 
I tried using several variations of the path but none worked in mobile. 

 

As an extra aside, I added this code to the Code Injection section in the Header box, which allows the site to smooth scroll to the anchor link. Could be useful for anyone else playing around with anchor links:
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script><script type="text/javascript">$(function() {$('a[href*=#]:not([href=#])').click(function() {if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {var target = $(this.hash);target = target.length ? target : $('[name=' + this.hash.slice(1) +']');if (target.length) {$('html,body').animate({scrollTop: target.offset().top}, 1000);return false;}}});});</script>

 

Note: after adding the above code the anchor links are now working in mobile - using /#ourpurpose. Which is odd. 

Share this post


Link to post
  • 0

Thanks so much for this as I am doing the same for a client. I had gotten this far already but would like to take it a step further -- is there a way to indicate Active state in the navigation links when a) someone scrolls manually to the next 'page' section, or b) clicks on the anchor link navigation item and then it scrolls to it, as described above?

Share this post


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