diff --git a/scripts.js b/scripts.js index facc21d577ce85ea3aab3365eebcfa14a6792636..cf025cc6ab4f4403c43a7ad427377dc3beac8afa 100644 --- a/scripts.js +++ b/scripts.js @@ -19,6 +19,7 @@ window.addEventListener('resize', () => { navigation.removeAttribute('style'); navigation.classList.remove('show'); burger.setAttribute('aria-expanded', 'false'); + burger.classList.remove('open'); document.body.removeAttribute('style'); }); @@ -54,6 +55,7 @@ function desktopNavControls() { **/ burger.addEventListener('click', () => { navigation.classList.toggle('show'); + burger.classList.toggle('open'); if (navigation.classList.contains('show')) { // Stops user from scrolling while nav is open document.body.style.overflow = 'hidden'; diff --git a/styles.css b/styles.css index 2d29f6c3996e95ad2f330258f1cf3191ef111b14..910f4ebe1ef0ce5259c43e28cdf273a976ad989d 100644 --- a/styles.css +++ b/styles.css @@ -10,9 +10,9 @@ /* Segoe UI Semilight Configuration */ @font-face { - font-family: "Segoe UI"; - font-weight: 300; - src: local("Segoe UI Semilight"); + font-family: "Segoe UI"; + font-weight: 300; + src: local("Segoe UI Semilight"); } /*** Global Styles ***/ @@ -459,6 +459,23 @@ background-color: white; box-shadow: 3px 5px 19px 0px rgba(0, 0, 0, .41); + + transition: all .3s; + } + + /** Animate hamburger **/ + + .hamburger.open div[class|="hamburger"]:nth-of-type(1) { + transform: rotate(-35deg) scaleX(.5) translate(-55%, 0); + } + + .hamburger.open div[class|="hamburger"]:nth-of-type(2) { + transform-origin: left; + transform: scaleX(.85); + } + + .hamburger.open div[class|="hamburger"]:nth-of-type(3) { + transform: rotate(35deg) scaleX(.5) translate(-55%, 0); } /*** Footer Styles ***/