CODEWITHSUNDEEP
cssreactjstailwind-cssreact-scroll
user21075278
user21075278

Reputation: 3

How do I position my component to not be under my NavBar while using react-scroll?

I am using react-scroll to smoothly scroll through four components. When I click one of the components from the NavBar, it scrolls the component to the top of the screen, rather than the bottom of the NavBar. I added an image to show how the NavBar is hiding some of my information. NavBar hiding component

My NavBar looks like this

 <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>

Although I have not tried it yet, I am assuming that making each component 120% in height or something would fix the issue of the NavBar basically scrolling too much, but I do not want so much space, and am hoping there is a different way to fix it.

I am using TailwindCSS, and have h-screen for the height of each component. Here is my GitHub link if you need to look at my code! GitHub

Upvotes: 0

Views: 58

Answers (1)

Rao Asim
Rao Asim

Reputation: 330

Just checked your project, you are using sticky navbar and the react-scroll is not able to detect your navbar when it scrolls down, hence you are getting that effect. As a work around you can use offset property of link component, such as

       <Link
        to={url}
        spy={true}
        smooth={true}
        isDynamic={true}
        offset={-110}
        className="p-3 focus:bg-clicked-green hover:bg-selected-green no- 
        underline text-black"
      >
        {title}
      </Link>

This would help you get some extra padding and your navbar would not overlap with your content.

Upvotes: 0

Related Questions