Hello,
1.The problem is that the boxes are not actual links. They are div elements with a custom click event attached (probably from the elementor page builder).
You need to change your boxes to actual link elements, in order for the “Page scroll to id” plugin to handle them.
The #service (top arrow) link works correctly because it is an actual link element (that’s why when you hover it with the cursor you can see the URL at the bottom of the browser).
You should be able to change your boxes from divs to links (<a>) with Elementor.
You should basically follow this guide in order to create the actual links and targets. In short:
Give each of your target section an id, e.g. section-1
Create a link box with the URL of the target, e.g. #section-1
2.What do you mean by “not working properly” on desktop? I tested it and it works for me, i.e. it scrolls to the #service element
On mobile it doesn’t work because the top arrow links get hidden by some invincible spacer elements, i.e. the spacer elements “cover” them so you don’t really click the actual arrow link (you click the invincible spacer). Hope this makes sense.
I have no idea why those spacers have the CSS rules they have but you should change them with CSS like this:
body:not(.elementor-editor-active) .elementor-menu-anchor:before{
height: auto;
margin-top: 0;
}
This should keep the same spacing between the sections without covering the top arrow links.
Hope this helps
