Tengo un div de barra de navegación que tiene un título y un componente de navegación. Cuando la ventana se vuelve lo suficientemente pequeña, colapso el elemento de navegación, así que tengo una hamburguesa para mostrar y ocultar el elemento de navegación. Sin cambiar el atributo de posición del div de la barra de navegación principal, funciona bien, sin embargo, cuando hago que el div de la barra de navegación principal sea fijo, ya no puedo ver que la barra de navegación se mueva hacia la pantalla. Alterno las clases navbarHidden y navbarVisible en el elemento de navegación secundario cuando se hace clic en la hamburguesa.

 .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); }

Sin embargo, el elemento de navegación todavía aparece cuando inspeccionas la página.