I have a navbar div that has a title and a nav component. When the window gets small enough I collapse the nav element so have a burger to show and hide the nav element. Without changing the position attribute of the parent navbar div it works fine, however when I make the parent navbar div sticky I can no longer see the navbar move over onto the screen. I toggle the navbarHidden and navbarVisible class on the child nav element when the burger is clicked.
.navbar { display: flex; align-items: center; justify-content: space-between; height: 8vh; border-bottom: 1px solid rgb(220, 220, 220); position: sticky; top: 0; background-color: white; } .navbar nav { position: absolute; right: 0px; top: 8vh; height: 92vh; display: flex; flex-direction: column; justify-content: space-evenly; padding-right: 0; font-size: 30px; width: 40%; background-color: antiquewhite; transition: transform 0.5s ease-in; z-index: 1; } .navbarHidden { transform: translateX(100%); } .navbarVisible { transform: translateX(0); }
The nav element still shows up when you inspect the page though.
Advertisement
Answer
I figured it out, all you had to do was change the position on the nav element to fixed instead of absolute.