Überlappende Informationen über überlappende Informationen auf der Seite, wenn der Browser die Größe der Änderung der Än ⇐ CSS

[Anonymous]

Ich versuche, einen festen Sidebar -NAV in React zu erstellen, aber er überlappt meine Seiten. Alle meine Informationen befinden sich unter der Navigationsleiste, wenn ich meinen Browser ändern kann. Angehängt sind die Bilder. Kennt jemand das Problem? Vielen Dank.

Code: Select all

function Navbar() {const [currentTab, changeTab] = useState("Home");
return (



[list]
[*] Home
[*] Execution
[*] Review
[*] Profile
[*] Setting

[/list]




);
}

export default Navbar;
< /code>
CSS: < /p>
.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;
}
< /code>
app.jsx

:

Code: Select all

function DefaultContainer() {
return (














);
}
export default App;