0

Hola tengo un problema con los nav del header, me pasa que quiero mover los links a la derecha pero nada me funciona, no hace nada con ningún código.

Este es mi código necesito mandar los nav a la derecha de todo dentro del header, ando necesitando su ayuda:

header {
  display: flex;
  background-color: #fbbc02;
  padding: 10px;
  align-items: center;
  border-radius: 10px;
}

.letraheader {
  font-family: 'Kdam Thmor Pro', sans-serif;
  color: black;
}

.logo img {
  height: 50px;
  margin-right: 10px;
}

.links {
  font-size: 16px;
  transition: font-size .5s ease-in;
  justify-content: end;
}
<header>
  <div class="logo">
    <img src="./img/pelotafutbol.png" alt="">
  </div>
  <h2 class="letraheader">Mercado Futbol</h2>
  <nav class="links">
    <i class='bx bxs-hand'></i>
    <a href="">Opiniones</a>
    <i class='bx bxs-user-account'></i>
    <a href="">Crea tu cuenta</a>
    <i class='bx bxs-log-in'></i>
    <a href="">Ingresa</a>
  </nav>

</header>

2 respuestas 2

1

No te funciona funciona porque si usas flex y quieres que los elementos se distribuyan bien aunque flex ya hace un buen trabajo lo mejor es calcular los tamaños correctos, por ejemplo, trata de darle al logo, texto y nav un width y luego le aplicas el right, de esa forma funcionara correctamente, por ejemplo:

* {
        box-sizing: border-box;
    }
    header {
        display: flex;
        background-color: #fbbc02;
        padding: 10px;
        align-items: center;
        border-radius: 10px;
        flex-wrap: wrap;
    }
    .letraheader {
        font-family: 'Kdam Thmor Pro', sans-serif;
        color: black;
        display: inline-block;
        width: 30%;
        padding-left: 15px;
    }
    .logo {
        width: 6%;
    }
    .logo img {
        width: 100%;
        height: auto;
        display: inline-block;
    }
    .links {
        font-size: 16px;
        transition: font-size .5s ease-in;
        justify-content: end;
        display: inline-block;
        width: 64%;
        text-align: right;
        padding-right: 3s%;
    }
<header>
      <div class="logo">
        <img src="https://static.vecteezy.com/system/resources/previews/001/204/011/original/soccer-ball-png.png" alt="">
      </div>
      <h2 class="letraheader">Mercado Futbol</h2>
      <nav class="links">
        <i class='bx bxs-hand'></i>
        <a href="">Opiniones</a>
        <i class='bx bxs-user-account'></i>
        <a href="">Crea tu cuenta</a>
        <i class='bx bxs-log-in'></i>
        <a href="">Ingresa</a>
      </nav>

    </header>

Aqui le asigno un tamaño a los elementos y luego al nav solo le aplico un text-align: right; de esa forma sigues aprovechando flex sin necesidad de usar float.

1
  • Muchísimas gracias! el 9 jun. 2022 a las 21:06
0

En vista que ya tienes creada la clase links lo que podrías hacer es alinear la barra de navegacion en un bloque display: inline-block y posterior a esto agregarle la propiedad width para que te ocupe cierto tamaño de la pantalla, eso lo decides tu, yo le doy un 60% y por ultimo lo que tienes que hacer es alinear el texto hacía la derecha:

 header {
            display: flex;
            background-color: #fbbc02;
            padding: 10px;
            align-items: center;
            border-radius: 10px;
        }
        
        .letraheader {
            font-family: 'Kdam Thmor Pro', sans-serif;
            color: black;
        }
        
        .logo img {
            height: 50px;
            margin-right: 10px;
        }
        
        .links {
            text-align: right;
            display: inline-block;
            width: 60%;
            font-size: 16px;
            transition: font-size .5s ease-in;
        }
<header>
        <div class="logo">
            <img src="https://cdn.pixabay.com/photo/2020/12/03/00/16/balloon-5799070_1280.png" alt="">
        </div>
        <h2 class="letraheader">Mercado Futbol</h2>
        <nav class="links">
            <i class='bx bxs-hand'></i>
            <a href="">Opiniones</a>
            <i class='bx bxs-user-account'></i>
            <a href="">Crea tu cuenta</a>
            <i class='bx bxs-log-in'></i>
            <a href="">Ingresa</a>
        </nav>

    </header>

1
  • Muchísimas gracias! el 9 jun. 2022 a las 21:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.