css - 调整浏览器大小时，在页面上反应侧边栏导航重叠信息

Question

我正在尝试在反应中制作一个固定的侧边栏导航，但它与我的页面重叠。当我调整浏览器大小时，我的所有信息都将位于导航栏下方。附上图片。有谁知道这个问题？谢谢。在此处输入图像描述

调整浏览器大小之前 调整浏览器大小 之后

jsx代码

function Navbar() {const [currentTab, changeTab] = useState("Home");
 return (
    <>
    <div className='navbar'>
      <nav className='nav-menu'>
    <ul className='nav-menu-items'>
      <li className='nav-text'> Home</li>
      <li className='nav-text' >Exexution</li>
      <li className='nav-text'>review</li>
      <li className='nav-text'>profile</li>
      <li className='nav-text'>setting</li>


    </ul>

  </nav>

</div>
</>

 );
 }

 export default Navbar;

CSS代码

.navbar{
  background-color: transparent;
  height: 80px;
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 0 0 0 0 ;

  }
  .menu-bars{
     margin-left: 2rem;
      font-size: 2rem;
      background: none;

         }

    .nav-menu{
        background-color: aqua;
        width: 250px;
        height: 100vh;
        display: flex;
        justify-content: center;
         position: fixed;
         top: 0;

           }

        .nav-menu-item{
            width: 100%;
              }
       .nav-text{
           display: flex;
             justify-content: start;
              align-items: center;
             padding: 8px 0px 8px 16px;
           list-style: none;
          height: 60px;


           }

应用程序.jsx

function DefaultContainer() {
   return (

     <>
       <Router>
        <Navbar />

         <Switch>
         <Route path="/" exact component={Home} />
         <Route path="/execution" exact component={Execution} />
         <Route path="/review" exact component={Review} />
         <Route path="/profile" exact component={Profile} />
         
          </Switch>
         </Router>
        </>
       );
        }
     export default App;

标签： cssreactjs