Anchor link going down too far on page

[GCA_2015]

I have a page with several forms. At the top of the page I have a text section which uses anchor links for the user to go directly to the appropriate form.

Each form is in a separate column that contains a text box for the form title and a Contact Form 7. The link ID is in the custom ID section of the column. Each column has a unique link ID. The problem is that the page scrolls down below the link obscuring the title and the top part of the form.
This is what I want to happen:

However, this is what does happen:

I’ve searched the forum and tried various solutions that seem pertinent, but I haven’t had any luck fixing the problem.
The page URL is: www.greyhoundclubofamericainc.org/submit-photos

[nabeel]

Hi @GCA_2015,

Thank you for reaching out to us. I tried to check your page URL but it’s not reachable at the moment. Instead of giving IDs to the columns, try giving IDs to the sections and see if this resolves the issue. If the issue persists then please check for the following first:

1. TESTING FOR PLUGIN CONFLICT
2. THEME UPDATE
3. CHILD THEME
4. CSS/JS CUSTOMIZATION
5. DISABLING CACHE
6. DISABLING CDN
7. VERSION COMPATIBILITY

If you still have problems then please get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Thanks!

[GCA_2015]

I went thru the list of common problems, tried turning FlexBox off for each item, changed the position of the custom ID to the text field at the top of the column instead of the column itself - nothing helped.
One thing I tried did make the anchor links work – changing the header from fixed top to static. However, I would prefer to have a fixed top header.
Here is the page URL again (I’m not sure why it didn’t work before): https://www.greyhoundclubofamericainc.org/submit-photos/
I’m posting sign in information separately.

[tristup]

Hi @GCA_2015,

When you are using the anchor to pointing out the section on the same page, the section will be scrolled up to or down as a topmost section of the page. In your case, you have added the ID to the column and when it scrolled up as top of the page and goes under the menu.
I have created a new page, where I made a new structure and set the ID to the top column as pointed out by my colleague in his answer, and also added top padding to adjust the offset.

Now it seems the form is coming properly, if you find this working please try to replicate the structure. Please find the URL in a secure note.

Hope it helps.
Thanks

[GCA_2015]

Adding padding to the top of each form was easy to do but results in what looks to me like a very unprofessional page due to all of the white space on the top of every one of the 7 contact forms.

Isn’t there any other solution that will still allow me to keep my fixed header?

(I went thru the Forum again and it appears that the same problem exists in X Pro, so my thoughts about upgrading doesn’t seem like it would solve the problem. Plus, I’m still in the process of converting all the pages in the site over from Visual Composer so I’m guessing that would be a problem right now if I decided to upgrade.)

[tristup]

Hi @GCA_2015,

You need to add the padding as you have set the Header fixed, if you remove the fixed header, you will get the result what you are expecting. Even you don’t need to add that much padding to each column.

Hope that helps.
Thanks