Header Sticky problema con CSS

  • Laura N

    (@tallerwp)


    hace 6 años, 11 meses

    Buenas tardes,

    Quería hacer que el header de arriba de una plantilla que estoy haciendo se quede fijo. Eso no tengo problema en hacerlo ya que usé.

    .header{
    position: fixed;
    width: 100%;
    top: 0px;
    }

    El problema es que ahora el contenido de abajo se me queda debajo del header. Entonces uso

    .container {
    margin-top:20px;
    }

    El problema es que en responsive se ven margenes en blanco entre el header y el container. El container es una imagen con un título. Osea un hero.

    ¿Qué puedo hacer para que ese container se «pegue» al header en todos los dispositivos? Digamos que pueda coger ese margin automáticamente sin que quede espacios.

    Gracias

Viendo 2 respuestas - de la 1 a la 2 (de un total de 2)
  • Pablo Moratinos

    (@pablo-moratinos)

    hace 6 años, 11 meses

    Hola, Puedes jugar con la regla @media para que determinados estilos solo se apliquen para algunos tamaños de pantalla y vas ajustando el margin-top para cada caso.
    https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    • Esta respuesta fue modificada hace 6 años, 11 meses por Pablo Moratinos.
    oldlastman

    (@oldlastman)

    hace 6 años, 11 meses

    Efectivamente como te indica @pablo-moratinos tendrás que usar @media

    un ejemplo sería trabajando con el mobile first

    
.header{
position: fixed;
width: 100%;
top: 0px;
}
@media screen and (min-width: 37.5em) {

.container {
margin-top:20px;
}
}
@media screen and (min-width: 64em) {
.container {
margin-top:40px;
}
}

    ojo, esto no está probado y los min-with está elegidos un poco arbitrariamente (hay gente que lo prefiere expresarlos en px), tendrás que ajustar a tus necesidades

Viendo 2 respuestas - de la 1 a la 2 (de un total de 2)
  • El debate ‘Header Sticky problema con CSS’ está cerrado a nuevas respuestas.