Hallo zusammen,
ich habe heute eine responsive Navigation für mein Projekt erstellt.
Eigenständig funktioniert diese auch. Wenn ich sie aber in meinem Projekt hinzufügen möchte fährt die Sidebar bei kleinen Auflösungen nicht aus.
Die js Datei wird auf jeden Fall geladen. Ich weiß echt nicht mehr weiter.
Hoffentlich könnt ihr mir helfen 
Hier ist noch der css code für die Navigation
Code
.navigationBar {
margin: 0;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 100px;
font-family: 'Raleway', sans-serif;
background-color: #688E23;
text-decoration: none;
border-bottom-style: solid;
border-bottom-color: black;
border-bottom-width: 3px;
}
.navigationLinks {
display: flex;
justify-content: space-around;
width: 65%;
}
.navigationLinks a {
letter-spacing: 2px;
color: #FFFFF0;
font-size: 20px;
text-decoration: none;
}
.navigationBar ul li {
text-decoration: none;
}
.navLogo {
height: 50px;
width: 50px;
padding-bottom: 5%;
margin-right: 10%;
justify-content: space-around;
position: absolute;
top: -0.5%;
left: 1.5%;
}
.burger {
display: none;
}
.burger div {
background-color: #FFFFF0;
width: 40px;
height: 7px;
margin: 8px;
border-style: solid;
border-width: 1px;
border-color: darkblue;
}
.search-container {
position: absolute;
float: right;
}
@media screen and (max-width: 1300px) {
.navigationLinks {
width: 80%;
}
}
@media screen and (max-width: 900px) {
.navigationLinks {
width: 85%;
}
}
@media screen and (max-width: 950px) {
body {
overflow-x: hidden;
}
.navigationLinks {
position: absolute;
right: 0px;
height: 900px;
top: 100px;
background-color: #688E23;
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
transform: translateX(100%);
transition: transform 0.2s ease-in;
}
.navigationLinks li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%);
}
@keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}