Kilps

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

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.

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.