CODEWITHSUNDEEP
cssreactjsstyled-components
Johnxr
Johnxr

Reputation: 316

Best Way to Have Transparent Navbar that is positioned on hero section in React?

I have this navbar component that sits above my hero section. My problem is if I make the background transparent, it will just be white instead of being on top of my hero image.

Right now it looks like this enter image description here

Here is the code for the navbar

      export const Nav = styled.nav`
        background: transparent;
        height: 80px;
        display: flex;
        justify-content: space-between;
        padding: 0.5rem calc((100vw - 1000px) / 2);
        z-index: 10;
      `;

In my App.js the navbar just stacks on top of the hero section

           function App() {
        return (
          <Router>
            <Navbar />
            <Hero />
          </Router>
        );
      }

So no matter what it will always be located on top.

The only alternative I've found is to add

margin-top: -80px to my hero section, but I feel like there's a better way to do it.

enter image description here

The negative margin essentially does the trick, and you can see the navbar is over the hero image, but now I lose -80px of the hero section and it doesn't display the full 100% of it.

Any ideas of how to create a navbar that is located on top of a hero section without using negative margins?

Upvotes: 1

Views: 1998

Answers (1)

Matthieu1
Matthieu1

Reputation: 11

Try this. At your Hero section keep margin-top: -80px and instead of height: 100% put height: 100vh; Tell me if it helped

Upvotes: 1

Related Questions