Primary Nav Anchor Link Scrolling Problem

Site URL: https://opticair.co.uk/

Using the Sonora template, I have my home page set up as several sections, with anchor links within a fixed position primary navigation to enable the user to quickly navigate around the page, with a tidy scrolling visual effect. This would work (and has worked) fine if this were the only page on my site, using the link format '#section-name' to take the user to 'domain.co.uk#section-name'.

There are additional pages in my site, which the user can access through links within the body of the home page and on which the primary navigation is obviously still displayed. However, the primary navigation links in the format '#section-name' do not work from this page as they attempt to take the user to 'domain.co.uk/subpage#section-name' and the sections do not exist within the sub page.

I addressed this by changing the primary navigation link format to '/home#section-name', which solves the problem when navigating from the sub page. However, now when using the links whilst already on the home page, the link takes the user to the correct section, but the scrolling effect does not always show. On the first click of a primary navigation link (whichever link) after loading the site, the page reloads, rather than scrolling, with the appended '/home' (from 'domain.co.uk' to 'domain.co.uk/home#section-name'), landing the user at the correct section. Upon clicking any further links, the scrolling effect shows correctly as the '/home' page is already loaded in the address bar.

What I would like to achieve is that when using the primary navigation when already viewing the home page, the content always scrolls, whether it is the first click of a link or not. When clicking the link from any other page, it already correctly loads the home page at the required section; no scrolling is required here as the user is actually navigating to another page. 

Two possible solutions I can think of are either to force the site home page to always show its full 'domain.co.uk/home' url upon loading, rather than just 'domain.co.uk', or to make the primary navigation links dynamic so that on the home page they take the format '#section-name' but on all other pages they take the format '/home#section-name'. I do not know how to implement either of these ideas.

I have also considered having the sub page content open in something like a lightbox, rather than a separate page, to avoid navigating away from the home page at all, but I expect the site to grow and this will not be suitable for all future content, so I would rather address this by other means.

Can anyone help with implementing either of my suggested solutions, or does anyone have any other solutions?

I have tried to be thorough but this seems like a lot of explanation for a simple issue! Hopefully there is a simple solution. Thanks in advance.

You can create 2 scroll navigation for Home Page & Other Page

then use CSS to hide Home Navigation on Other Pages

and CSS to hide Other Pages Navigation on Home Page

You can create first, then share link to Home page & an example other page

Then we can take a look.

Thanks tuanphan for your reply.

I've done a bit of reading based on your suggestion and I've cracked it. I've duplicated each primary navigation item, so each exists in both the format '#section-name' and the format '/home#section-name', then used the following custom CSS to force only the '#section-name' links to display on the home page and only the '/home#section-name' links to display on all other pages. 

body.homepage .Header-nav a[href^="/"]{
  display: none;
}
body:not(.homepage) .Header-nav a[href^="#"]{
  display: none;
}
body.homepage .Mobile-overlay a[href^="/"]{
  display: none;
}
body:not(.homepage) .Mobile-overlay a[href^="#"]{
  display: none;
}

It's a bit of a nuisance that each menu item has to be created twice as I can't find a way to make them truly dynamic with CSS, but it's a minor inconvenience and it solves the problem. 

Yes. You can also combine your code to

body.homepage .Header-nav a[href^="/"], body:not(.homepage) .Header-nav a[href^="#"], body.homepage .Mobile-overlay a[href^="/"], body:not(.homepage) .Mobile-overlay a[href^="#"] {
  display: none;
}

or

body.homepage {
	.Header-nav a[href^="/"], .Mobile-overlay a[href^="/"] {
  		display: none;
	}
}
body:not(.homepage) {
    .Header-nav a[href^="#"], .Mobile-overlay a[href^="#"] {
      display: none;
    }
}

Thanks tuanphan, I have updated my code to your second suggestion, much appreciated.

We have a really simple add-on for anchor linking in 7.1 -- https://www.squareaddons.com/shop-2/anchor-linking

15 minutes ago, heavyeyes said:

Hi Ttuanphan,

 

I am also trying to achieve the same thing as Kilps. I’ve used the code above but my duplicate nav links show instead of disappearing. So i removed them and am just using the /home/#page-section etc. But now my homepage gives a hard refresh when its first loaded and i click the nav. I’m also trying to avoid having the page reload on the homepage when you click the nav for the first time. For some reason, it reloads and afterward works fine. Any help would be appreciated.

my site is:
https://wedge-lanternfish-wlfy.squarespace.com/config/?frameUrl=%2F

It's normal. If you only use #anchor, it will only work on homepage and not on other pages, and if you use /home# anchor, it works on every page but will have problems as you just wrote.

Hey Tuanphan,

The code above is ideal for my site since it would remove the hard refresh that happens on the homepage. Do you know why my duplicate nav links are not hiding? After following the steps and CSS above my duplicate nav links do not disappear.

My site is: https://wedge-lanternfish-wlfy.squarespace.com/

I used the CSS below:

body.homepage .Header-nav a[href^="/"]{
  display: none;
}
body:not(.homepage) .Header-nav a[href^="#"]{
  display: none;
}
body.homepage .Mobile-overlay a[href^="/"]{
  display: none;
}
body:not(.homepage) .Mobile-overlay a[href^="#"]{
  display: none;
}
 

17 hours ago, heavyeyes said:

Hey Tuanphan,

The code above is ideal for my site since it would remove the hard refresh that happens on the homepage. Do you know why my duplicate nav links are not hiding? After following the steps and CSS above my duplicate nav links do not disappear.

My site is: https://wedge-lanternfish-wlfy.squarespace.com/

I used the CSS below:

body.homepage .Header-nav a[href^="/"]{
  display: none;
}
body:not(.homepage) .Header-nav a[href^="#"]{
  display: none;
}
body.homepage .Mobile-overlay a[href^="/"]{
  display: none;
}
body:not(.homepage) .Mobile-overlay a[href^="#"]{
  display: none;
}
 

Did you solve?

Hi Tuanphan,

I am having a very similar issue (1st click on nav links refreshes the page), but augmented by the fact that it is a bilingual site. I used Brad Good's approach to set it up (https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template). 

Since I already had to use hidden links for different languages and I use the necessary language subdirectories, I was not able to implement your solution. Would you mind having a look at it? 

Website: marekslavicky.com
Password: Scrat1234
Using SS7.1

Ideally, I would want the nav links scroll already on the 1st click (no full refresh).
Option 2: Force my website somehow to open at marekslavicky.com/en/home/#top
Option 3: (not much in favor yet, but would be easiest) - create a cover page, where people chose their language.

Many thanks in advance!
Marek

On 11/7/2020 at 9:57 PM, MarekS said:

Hi Tuanphan,

I am having a very similar issue (1st click on nav links refreshes the page), but augmented by the fact that it is a bilingual site. I used Brad Good's approach to set it up (https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template). 

Since I already had to use hidden links for different languages and I use the necessary language subdirectories, I was not able to implement your solution. Would you mind having a look at it? 

Website: marekslavicky.com
Password: Scrat1234
Using SS7.1

Ideally, I would want the nav links scroll already on the 1st click (no full refresh).
Option 2: Force my website somehow to open at marekslavicky.com/en/home/#top
Option 3: (not much in favor yet, but would be easiest) - create a cover page, where people chose their language.

Many thanks in advance!
Marek

Hi. Sorry for the delay. Do you still need help on this?

9 minutes ago, tuanphan said:

Hi. Sorry for the delay. Do you still need help on this?

Hi Tuanphan!
No worries. Yes, your help would still be much appreciated. I decided not to go for Option 3 (a cover page to choose a language), so finding a solution to "scroll on 1st click" would really help me!
Thanks,
Marek

Hi Tuanphan,
Any update on this issue? I plan to make the website go public on November 13, so any help would be appreciated. Many thanks!

Marek

Option 2: Force my website somehow to open at marekslavicky.com/en/home/#top

Try adding this code to Home page Settings > Advanced > Header

<script>
window.location.href = "https://www.marekslavicky.com/en/home/#top";
</script>

TuanPhan, thanks so much!!! This is exactly the ideal solution for me. The scrolling has never been beautifuler on my website! 🙏

Just a quick follow up for this method: it is needed to remove this code temporarily if I want to edit the content of the page (the edit button does not do anything). Not a big deal, really, but good to know.

yes i understand the issue completely after reading the complete issue in the above article i will clear your issue and guide you the right way but you have to send me your email address then it will be pretty easy for you to solve the issue.

On 11/13/2020 at 5:50 PM, MarekS said:

Just a quick follow up for this method: it is needed to remove this code temporarily if I want to edit the content of the page (the edit button does not do anything). Not a big deal, really, but good to know.

Hi. Sorry. I didn't see your comment. Do you still need help on this?

On 2/18/2020 at 2:52 AM, tuanphan said:

Yes. You can also combine your code to

body.homepage .Header-nav a[href^="/"], body:not(.homepage) .Header-nav a[href^="#"], body.homepage .Mobile-overlay a[href^="/"], body:not(.homepage) .Mobile-overlay a[href^="#"] {
  display: none;
}

or

body.homepage {
	.Header-nav a[href^="/"], .Mobile-overlay a[href^="/"] {
  		display: none;
	}
}
body:not(.homepage) {
    .Header-nav a[href^="#"], .Mobile-overlay a[href^="#"] {
      display: none;
    }
}

 

Hello, I am attempting this method also but also seeing that my duplicate nav links are not disappearing, any tricks to get this to work? (I am currently using a 7.1 site)

Thank you.

On 2/19/2022 at 8:24 AM, jy15 said:

Hello, I am attempting this method also but also seeing that my duplicate nav links are not disappearing, any tricks to get this to work? (I am currently using a 7.1 site)

Thank you.

What is your site url?