Anchor text is behind the navigation menu

[saif39]

Recently I noticed that when I click on the anchor text it goes right to anchor hyperlink item but gets hidden behind the navigation menu. Users can see the header when they scroll up. Need help to align the header in such scenarios.

I am using the anchor link like below.

<h2><a name="test"></a>2. Test</h2>

then hyperlinked to #test

by the way it works fine on the mobile page, as the navbar is hidden

and also when I click on the anchor link it just snap into the header, without any scrolling affect.

Could you please help ?

[jade]

Hi Saifudheen,

Do you have any custom Javascript that changes the behavior of the one page navigation scrolling? If so, kindly try removing the codes as it might be causing the issue.

If that is not the case, you might need to add a padding to the top area of the linked section instead of a margin.

In case none of the items above applies to your setup, kindly provide us with the link to the page in question so that we can have a look at it.

Thank you.

[saif39]

None applied to mine, shared the url, pls help

[friech]

Hi Saifudheen,

Please update your deep link to:

<h2><a href="#test">1. Test</a></h2>

Then apply that ID to the first element of the intended section,

e.g.

<h2 id="test">1. DHCP configuration with netplan</h2>

If the problem persists (because the header does not cooperate), add a class ptl to the headline to offset the header.

e.g

<h2 id="test" class="ptl">1. DHCP configuration with netplan</h2>

Hope it helps,
Cheers!

[saif39]

Yes that worked, thank you so much!!

[ruenel]

You’re welcome!
We’re glad @Friech were able to help you out.