diff --git a/components/Navbar.module.css b/components/Navbar.module.css index 82e5475d..02ec959d 100644 --- a/components/Navbar.module.css +++ b/components/Navbar.module.css @@ -152,6 +152,11 @@ visibility: visible; } +/* Prevents a weird flash of opacity change on mobile */ +.navMobileBackground { + opacity: 0; +} + /* On a smaller desktop screen, keep the same navbar layout but decrease the * horizontal padding so it still fits */ @@ -237,7 +242,7 @@ box-sizing: border-box; height: 100%; top: 0; - right: 0; + left: 100%; overflow: auto; z-index: 30; @@ -246,7 +251,6 @@ background-color: var(--secondary-background); - transform: translateX(100vw); transition: 0.5s; } @@ -364,7 +368,7 @@ } .show.navMobileBackground + .navMenuWrapper { - transform: translateX(0); + transform: translateX(-100%); } .rotate {