I am facing an issue with Squarespace and would appreciate your help. So, I am designing a one-page website and I have added anchor links in the navigation menu so that it can jump to different sections. The links work fine on desktop view but don't seem to work on mobile view at all. Do let me know if you can help!

Here's the website
https://ocelot-cowbell-ajcw.squarespace.com/
PW : megan1234

What custom code are you using to perform the scroll?

On mobiles, certain sections are hidden and the links from the navigation refer to them

I used a bunch of different codes actually. And I landed on this one (I've changed the id for different sections like "about", which jumps to FACE OF THE BRAND and "contact", which jumps to "Lets' Connect" & "services" which jumps to "Services").

<a id="services" class="anchor-link">
  
</a>

It seems to work on desktop view but doesn't work on mobile view

On mobile the sections that contain them are hidden with CSS(display:none)

Oh yes, so what I did was, when I designed the website, the mobile view was not looking good and organised, so I had to duplicate the sections and design them as per mobile view, then using sections ids, I hid the mobile sections from the desktop view and vice versa.

But the mobile sections also contain the code, so it should jump to the section that I want it to. But why it isn't happening?

I think it tries to go to the first section that has the ID and those are hidden