Anchor Links scroll hidden behind sticky menu

Support
#1

I have when the page scrolls down to the anchor link, it works perfectly. But if an anchor link higher up on the page is chosen, the scrolls up until (I’m guessing) it’s at the top of the window. However, the sticky menus are on top of it, so the heading (where the anchor is ) cannot be seen.

The page in question: https://eatgutbar.com/bars/

How to see the issue:

  1. Click a flavor further down the page, like Apple Walnut Cinnamon (see it scroll to the correct place)
  2. Click another flavor from the menu, like Cashew Coconut. (see, you can’t see the name of the flavor)
  3. Click a flavor further down the page, like Cacao (see it scroll to the correct place)

What can I do to make it scroll correctly when going up the page?

Thanks!

#2

Hello @aleminopuy,

Thanks for writing to us.

The header height is the actual reason behind your issue. The height of the header is around 98px so you need to add a minimum of that amount of padding or margin to the linked section.

I would recommend you to add margin-top around 100px in the section

Activity-Content-Proas
Activity-Content-Proas379×557 33.3 KB

Thanks

#3

I changed it - not exactly as you put it - I ended up moving the ID to the section and adding padding there. Same idea, just implemented a little differently.

It works great for when a click scrolls the page up to the anchor.

However, now when clicking an anchor link that has to scroll down the page, it seems to stop “early,” since it’s stopping at the top of the section (with the padding).

There’s got to be a way to have it work both ways, right? Any ideas?

#4

Hey @aleminopuy ,

To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:

image
image1040×250 17.4 KB

Thanks!

#5

secure note with info added to my last post

thanks!

#6

Hey @aleminopuy,

I’m sorry to say that I’ve replicated the issue in my test site so this is a bug.

The temporary solution for this to put an element like a Gap element with 1px height with a specific ID within the affected section.

Hope that helps.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.