Tengo un problema con el CSS de la barra de navegación de un sitio web. Por favor, ayúdame a mover los elementos al lado derecho y a lidiar con la capacidad de respuesta.
HTML:
<nav> <a href="#" class="logo"><img src="./images/logo.png" height="120" width="120"></a> <ul> <li><a class="active" href="#">Home</a></li> <li><a href="#">How to MUN</a></li> <li><a href="#">Sponsors</a></li> <li><a href="#">Contact</a></li> </ul> </nav>CSS:
body, html { height: 100%; margin: 0; font-size: 16px; font-family: "Lato", sans-serif; font-weight: 400; line-height: 1.8em; color: #666; } nav { position: absolute; display: flex; align-items: center; padding: 30px 90px; z-index: 99; } nav .logo { color: #fff; font-weight: 700; text-decoration: none; font-size: 2rem; text-transform: uppercase; letter-spacing: 2px; } nav ul { display: flex; justify-content: center; align-items: center; } nav ul li { list-style: none; margin-left: 20px; } nav ul li a { text-decoration: none; padding: 6px 15px; color: #ffff; border-radius: 20px; } nav ul li a:hover, .active { background: #fff; color: #2b1055; }Lo he intentado muchas veces pero no soy capaz de solucionar el problema. Los elementos siempre se mantienen unidos.
body, html { height: 100%; margin: 0; font-size: 16px; font-family: "Lato", sans-serif; font-weight: 400; line-height: 1.8em; color: #666; } nav { position: relative; background: rgb(31, 30, 30); display: flex; align-items: center; justify-content: space-between; padding: 30px 90px; z-index: 99; } nav .logo { color: #fff; font-weight: 700; text-decoration: none; font-size: 2rem; text-transform: uppercase; letter-spacing: 2px; } nav ul { display: flex; justify-content: center; align-items: center; } nav ul li { list-style: none; margin-left: 20px; } nav ul li a { text-decoration: none; padding: 6px 15px; color: #fff; border-radius: 20px; white-space: nowrap; } nav ul li a:hover, .active { background: #fff; color: #2b1055; } /* breakpoint for mobile */ @media screen and (max-width: 768px) { nav { flex-direction: column; padding: 20px 0px; } }si desea un menú de respuesta más avanzado, puede ocultar el menú de navegación y agregar el botón de hamburguesa y luego usar css: enfoque para expandir el menú de navegación cuando haga clic en el botón de hamburguesa o use algún código javascript/jquery
Prueba esto
He agregado una consulta de medios para una vista receptiva. Cuando la resolución es inferior a 768 px, la barra de navegación cambia a la vista de columna
body, html { height: 100%; margin: 0; font-size: 16px; font-family: "Lato", sans-serif; font-weight: 400; line-height: 1.8em; color: #666; } nav { display: flex; align-items: center; padding: 12px 90px; z-index: 99; background-color:#7c7c7c; } nav .logo { color: #fff; font-weight: 700; text-decoration: none; font-size: 2rem; text-transform: uppercase; letter-spacing: 2px; } nav ul { display: flex; justify-content: right; align-items: center; width:100%; } nav ul li { list-style: none; margin-left: 20px; } nav ul li a { text-decoration: none; padding: 6px 15px; color: #ffff; border-radius: 20px; } nav ul li a:hover, .active { background: #fff; color: #2b1055; } @media only screen and (max-width: 767px){ nav { flex-direction: column; } nav ul { flex-direction: column; padding:0px; margin-bottom:0px; } nav ul li{ margin-left:0px; margin-bottom:5px; } } <nav> <a href="#" class="logo"><img src="https://images.unsplash.com/photo-1557053964-937650b63311?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=997&q=80" width="80"></a> <ul> <li><a class="active" href="#">Home</a></li> <li><a href="#">How to MUN</a></li> <li><a href="#">Sponsors</a></li> <li><a href="#">Contact</a></li> </ul> </nav>En primer lugar, debe hacer que la posición sea relativa.
en segundo lugar;