Smooth Scroll section going beneath sticky header

[markwest]

Hi,
We are using sticky header and there is a link to a section within page. When we click on that URL, it scrolls to the top of the page, but some part of the section goes under the sticky header. How to solve this issue?

[tristup]

Hi @markwest,

Thanks for reaching out.
In most of the cases, this type of issue happens due to the Top Padding of the section which you are pointing to, but it varies from case to case and may not be applicable for you.
Can you please share your site URL, so we can investigate the problem you are having?

Thanks

[markwest]

Hi @tristup

The site is see secure note - however, the post with the issue can’t be live yet. We would like to solve the issue before we put it live as it will go out on the RSS feed.

Thanks for your help

[tristup]

Hi @markwest,

If the page/post is not published yet, can you please provide login credentials for your site in a secure note to examine the page/post, including:

– WordPress Site URL & Login URL
– Exact Post/Page Name and URL where you are having that issue
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[markwest]

Hi @tristup,
Thanks for your reply. Details added to a secure note above as requested.
Kind Regards
Mark

[tristup]

Hi Mark,

The given credentials are not working, can you please check and send it once again.

Thanks

[markwest]

Hi @tristup
Apologies - I have now given grace on setting up 2FA and those credntials work.
Kind Regards
Mark

[prakash_s]

Hello Mark,

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

You need to add a custom class in the linked section like this and with respect to that class add this custom CSS code in your X/Pro-->Theme Option -->CSS

.linkedheadline
{
  padding-top:130px;
}

Please change the padding-top value as per your need.

Custom Class Screenshot

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks