javascript - When the navigation bar is position: fixed how can i solve problems that overlap with other components?

Question

I want to fix the navigation bar always on the top so i gave position: fixed by css, but it overlaps with the components below, causing a problem where I cannot see the contents. Tell me how to solve it.

For example // I gave opacity to nav bar

example image

here is my code

Navigation css

.Navigation {
                display: flex;
                position: fixed;
                z-index: 9999999999;
                top: 0;
                left: 0;
                width: 100vw;
                box-sizing: border-box;
                padding: 20px 50px;
                justify-content: space-between;
                background-color: #eee;
                opacity: 0.33;
                flex: 1
            }

App.js

                      <div className="App">
                      <Navigation />
                      <Home/>
                      <Blog/>
                      <Projects/>
                      <Contact/>
                      <Router/>
                      <GlobalStyles/>
                  </div>

question from:https://stackoverflow.com/questions/65885793/when-the-navigation-bar-is-position-fixed-how-can-i-solve-problems-that-overlap

Answer 1

Styling like this

.navigation {
   .....
   height: 65px, % , em, rem;
}

.content-container {
   margin-top: 65px, % , em, rem;
   .....
}

Wrap your components like this

<div className="app">
     <Navigation />
     <div className="content-container">
         <Home/>
         .......
        <GlobalStyles/>
     </div>
</div>