Anchor link content shows up under sticky menu

Hi there,

Can you give this solution a shot here?
https://generatepress.com/forums/topic/two-menu-problems/#post-358143

Hi GP team,
I'd like to follow up on this question, I am using elementor pro to build pages, and a few pages with elementor anchor, I was wondering if the new GP 1.6 smooth scroll function, it will resolve the sticky menu covering the top of the anchor point?
I tried to turn on the smooth scroll by click the smooth scroll box under Customize > General, however the problem remains, I am not sure if I need to add any css code in elementor pro? sorry I am not a developer.

Yes, the new smooth scroll option fixes this issue.

Once the option is turned on, you need to give your link this class: smooth-scroll

Then the script will take over :)

Hi Tom,
thank you from the prompt reply, may I ask how to add the "smooth-scroll"? I tried to add it under the particular anchor element's additional css, didn't work.

Thank you in advance!

First it needs to be turned on in "Customize > General".

Then your link needs to be set up like this:

<a href="YOURURL.com" class="smooth-scroll">You link</a>

Hi Tom,
I am really trying hard(I am not a website designer..),I tried to add the class in text editor, and under chrome console inspect element, right now is as below, but the smooth scroll effect is still not working
<a href="#widow's peak" class="smooth-scroll">髮際線設計</a>

from your reply, I tried to put in hook(apparently it was incorrect), I am really not sure where I could add this class now in order to work.

thank you for your time on this!

I believe your href is causing this. There shouldn't be a ' and space. If you can link us to the site we can take a look and give you the full code.

Hi Leo and GP team,
thank you so much for the attention with me!
one more question, I found when I tried to add the html class in text editor, it will change to <a class="smooth-scroll" href="#widow's peak">髮際線設計</a>
as above, the smooth-scroll will go the the front when I go back to preview. am I adding the html class at the correct place?
here are the links:
website: showhair.asia
two links for example(I've taken out the smooth scroll class for now):
https://showhair.asia/%E7%BE%8E%E5%9E%8B%E6%A4%8D%E9%AB%AE/#widow's%20peak
https://showhair.asia/%E7%BE%8E%E5%9E%8B%E6%A4%8D%E9%AB%AE/#scalp%20treatment

Thank you, I hope above are clear for you.
Melody

Not sure if I understand? Are you using the Text Editor?

That order should be fine. But make sure you you fixed the href part as I suggested above: https://generatepress.com/forums/topic/anchor-link-content-shows-up-under-sticky-menu/#post-533911

Let me know.

Hi Leo,
yes I put in the class in the Text Editor, as this screenshot, am I doing incorrectly?
https://postimg.org/image/ausu29291/

and I have this screen video as below, the smooth scroll is not working on mobil responsive.
https://www.useloom.com/share/663afe09924349138041fa22d1f47897

this particular example is:
https://showhair.asia/%E7%BE%8E%E5%9E%8B%E6%A4%8D%E9%AB%AE/#eyebrows

Oh and I've correct the ‘ and space problem, but still not working.
Thank you!!

Perhaps it's conflicting with another plugin on your site. For example, is Elementor also applying smooth scroll?

Apologies for pulling up an old thread here.. I want my navigation menu items to smoothly scroll to their corresponding Elementor section. How would I achieve this?

I think Elementor applies smooth scroll by default if your links link to an ID.

Hi Tom - it does, but it actually doesn't work as well as the GP type. The effect I am after is used in the Awaken Elementor template. I would like to know how it was implemented in this theme.