HTML CSS and Javascript Website #1
Description
hey , I'm on the middle of the Tutorial on that link and yah i having a problem which is when i click on navbar its does not work ... i dont know where the missing .....
this is the html
<title>Next website</title> <script> src="app.js"</script>this is the css
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'kumbh Sans', sans-serif;
}
.navbar {
background-color: #131313;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size:1.2rem;
position:sticky;
top: 0;
z-index: 999 ;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 0 50px;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top,#ff0844 0%, #ffb199
100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color:transparent;
-moz-text-fill-color:transparent;
display:flex;
align-items:center;
cursor:pointer;
text-decoration:none;
font-size:2rem;
}
.fa-gam {
margin-right: 0.5rem;
}
.navbar___menu{
display: flex;
align-items: center;
list-style: none;
text-align: center;
}
.navbar___item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
}
.navbar___btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background-color: #f77062;
color:#fff;
}
.button:hover {
background: #4837ff;
transition: all 0.3s ease;
}
.navbar__links:hover {
color:#f77062;
transition: all 0.3s ease;
}
@media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar___menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 0;
transition: all 0.5s ease;
height: 50vh;
z-index: -1;
background: #131313;
}
.navbar___menu.active {
background: #131313;
top:100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 50vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
.navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff;
}
.navbar___item {
width: 100%;
}
.navbar___links {
text-align: center;
padding:2rem;
width: 100%;
display: table;
}
#mobile-menu {
position: absolute;
top:20%;
right: 5%;
transform: translate(5%, 20%);
}
.navbar___btn {
padding-bottom: 2rem;
}
.button {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80%;
margin: 0;
}
.navbar__toggle .bar {
display: block;
cursor: pointer;
}
#mobile-menu.is-active .bar:nth-child(2){
opacity: 0;
}
#mobile-menu.is-active .bar:nth-child(1){
transform: translateY(8px) rotate(45deg);
}
#mobile-menu.is-active .bar:nth-child(3){
transform: translateY(-8px) rotate(-45deg);
}
}
this is ... js
const menu = document.querySelectorAll('#mobile-menu');
const menuLinks = document.querySelectorAll ('.navbar___menu');
menu.addEventListener('click', function() {
menu.classList.toggle('is-active');
menuLinks.classList.toggle('active');
});