nav { position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; transition: 0.6s; padding: 40px 100px; z-index: 600; } nav.onscroll { padding: 5px 100px; background: rgba(0, 0, 0, 0.5); } nav .logo { position: relative; font-weight: 700; color: #fff; text-decoration: none; font-size: 2em; text-transform: uppercase; letter-spacing: 2px; } nav ul { position: relative; display: flex; justify-content: center; align-items: center; } nav ul li { position: relative; list-style: none; } nav ul li a { position: relative; margin: 0 15px; text-decoration: none; color: #fff; letter-spacing: 2px; font-weight: 500px; transition: 0.6s; } nav.onscroll .logo, nav.onscroll ul li a { color: #fff; }