Currently, I am utilizing react-scroll for smooth navigation through four components. However, when I select a component from the NavBar, it scrolls that component to the top of the screen instead of aligning it with the bottom of the NavBar. To illustrate this issue further, I have included an image displaying how the NavBar obscures some of my content. See Image
Here is a brief overview of my NavBar:
<nav className="sticky z-10 top-0 font-semibold text-xl bg-nature-green grid grid-cols-3 items-center">
<a href="home" className="flex no-underline text-black">
<img
className="h-8 w-8 "
src="https://www.freeiconspng.com/thumbs/letter-j-icon-png/letter-j-icon-png-26.png"
/>
<span>BRAND</span>
</a>
<div className="flex sm:justify-center space-x-8 ">
{[
["Home", "home"],
["About", "about"],
["Products", "products"],
["Find Us", "find"],
].map(([title, url]) => (
<Link
to={url}
spy={true}
smooth={true}
className="p-3 focus:bg-clicked-green hover:bg-selected-green no-underline text-black"
>
{title}
</Link>
))}
</div>
<div className="flex space-x-8 justify-end">
{[twitter, twitter, instagram, instagram].map((icon) => (
<a>
<img className="h-w right-0" src={icon} />
</a>
))}
</div>
</nav>
I speculate that adjusting each component's height to 120% might resolve the excessive scrolling caused by the NavBar. Nonetheless, I prefer not to allocate too much space and hope to discover an alternative solution.
My project utilizes TailwindCSS, where each component has h-screen set for its height. For those interested in reviewing my code, here is the link to my GitHub repository! GitHub Repository