Reactjs.org: Anchors are hidden underneath the navbar when navigating to them

[claudiopro]

I noticed that anchor links slide under the navbar. This is similar to https://github.com/facebook/docusaurus/issues/2907 and likely caused by the increase of the height of the navbar caused by the BLM banner.

Steps to reproduce

1. Create an anchor and a link to the anchor in React docs
2. Publish the website
3. Tap the anchor link

Expected result

The anchor appears in view at the top of the page

Actual result

The anchor appears at the top of the page hidden under the navbar

[claudiopro]

The padding of anchors appears to be set in the Gatsby theme here:

https://github.com/reactjs/reactjs.org/blob/master/src/theme.js#L286-L292

[rickhanlonii]

Confirmed, thanks for filing this @claudiopro. Do you want to submit a PR to fix it?

[harshilparmar]

@rickhanlonii @claudiopro Can I try this?

[rickhanlonii]

@harshilparmar yeah! Let me know if you need any help getting set up.

[kwaimind]

Hey, I hope it's ok but I took the liberty of looking into this issue and made a PR with a potential fix.

[kavin25]

I have a fix for this. Can I do this?

[kavin25]

@claudiopro @rikhanlonii ^

[kavin25]

@rickhanlonii

[eps1lon]

@kavin25 Go for it :+1:

[kavin25]

I am not able to find this component and css for this. I have been able to implement it with inspect element, in chrome though. I found that there is a markdownremark being passed to markdownpage. The markdownremark comes from a data object, which is passed as props. But I am not able to find where the docs.js component is being called.

This is my first time, so will be very helpful if someone can help

[kavin25]

Nevermind... I managed to do it. Will make a pr in few mins

[kavin25]

Have created a PR

[rickhanlonii]

Thanks for the fix!