.flex{ display:flex; gap: var(--gap, 1rem); } .primary-header{ align-items: center; justify-content: space-between; } .mobile-nav-toggle { display: none; } .primary-navigation{ list-style: none; padding: 0; margin:0; margin-right: 2em; } @media (max-width: 35em) { .primary-navigation { --gap: 1em; position: fixed; z-index: 1000; inset: 0 0 0 30%; margin:0; flex-direction: column; padding: min(20vh, 10rem) 2em; transform: translateX(100%); transition: transform 350ms; background: hsl(0 100% 0% / 0.75); backdrop-filter: blur(1rem); } .primary-navigation[data-visible="true"]{ transform: translateX(0%); } .mobile-nav-toggle{ display: block; position:absolute; z-index: 9999; background: url("icon-hamburger.svg"); background-repeat:no-repeat; width: 2rem; border:0; aspect-ratio: 1; top: 2rem; right: 2rem; } } nav { position: relative; } nav ul { list-style-type: none; display: flex; justify-content: space-around; } nav ul li { position: relative; } nav ul li a { display: block; padding: 10px; text-decoration: none; color: #333; } nav ul li ul.dropdown-menu { position: absolute; top: 100%; left: 0; width: 100%; display: none; background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } nav ul li:hover ul.dropdown-menu { display: block; } nav ul li ul.dropdown-menu li { display: block; } nav ul li ul.dropdown-menu li a { padding: 5px 10px; }