[Resolved] Anchor link content shows up under sticky menu

[Robert]

Hello, have a one-pager site. The menu items are anchor tags to content on the same page.

But when a link goes to the section of the page, part of the section is under the sticky menu at the top. How do I get it to give it a few extra pixels so the entire section being linked to is visible?

FYI, I am using GP Pro with Elementor Pro.

Thank you in advance.

[Leo]

Hi there,

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

[Melody]

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.

[Tom]

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 🙂

[Melody]

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!

[Tom]

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>

[Melody]

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!

[Leo]

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.

[Melody]

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

[Leo]

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.

[Melody]

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!!

[Tom]

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

[Tim]

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?

[Tom]

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

[Tim]

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.

[Author]

Posts