search

briancodex / html-css-website-v1

Created a simple website using HTML, CSS & Javascript
103 stars 183 forks source link

Transition not working on my toggle bar #3

Open khushi-05 opened 3 years ago

khushi-05 commented 3 years ago

Hey there , I'm on the middle of the you amazing Tutorial but i got stuck as when i click on the toggle bar it does not work its just blank, its suppose to show the contents atleast if not the transition.......i was wondering if anyone can take a peek and help sort it.....

Here is my HTML file `<!DOCTYPE html>

NEXT Website

`

This is my CSS file.....

` *{ box-sizing: border-box; margin: 0; padding: 0; font-family: 'Kumbh Sans', sans-serif; }

.navbar { background: #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-gen{ margin-right: 0.5rem; }

.navbarmenu{ display: flex; align-items: center; list-style: none; text-align: center; } .navbaritem{ 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: #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) { .navbarcontainer { display: flex; justify-content: space-between; height: 80px; z-index: 1; width: 100%; max-width: 1300px; padding: 0; } .navbarmenu { 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: 80px; 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 my js File......

`const menu = document.querySelector('#mobile-menu');

const menuLinks = document.querySelector('.navbar__menu');

menu.addEventListener('click', function() { menu.classList.toggle('is-active'); menulinks.classList.toggle('active'); });`

inge02 commented 5 months ago

I'm having the same problem.

Enock4212 commented 4 months ago

having same problem

Enock4212 commented 4 months ago

about the the icon ...can someone help out??