'How do I adjust the position where an anchor lands?

I'm using React and Material UI for this,

On my navigation bar at the top of the page I have several links that are anchor links:

return (
    <Box sx={{ 
      display: 'flex',
    }}>

            <Box className='TitleButton'>
                <TitleText><a class='anchor' href="#About" className='About'>About</a></TitleText>
            </Box>

            <Box className='TitleButton'>
                <TitleText><a class='anchor' href="#About" className='Portfolio'>Portfolio</a></TitleText>
            </Box>
            
            <Box className='TitleButton'>
                <TitleText><a class='anchor' href="#About" className='Contact'>Contact</a></TitleText>
            </Box>
    </Box>
  )

Essentially it's 3 links: About, Portfolio, Contact

Right now the anchors are set to the top of the page, so the navbar obscures it. How would I adjust the landing zone for the anchor?

I have tried the following approach but it didn't work out:

a.anchor {
        display:block;
        padding-top:100px;
        margin-top:-100px;
    }

Would I set these anchor position in the narbar area I pasted above or would these need to be set at the individual anchor positions? Thanks for any help!

htmlcssreactjsanchor


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions