Plantillas Header y Footer responsive para diseño web

  • Autor Autor ultracobra
  • Fecha de inicio Fecha de inicio

ultracobra

Ni
Verificado por Whatsapp
Anduve diseñando headers y footers al estilo vanilla, pero el despliegue en pantallas pequeñas rara vez es agradable,. ya no quiero gastar más tiempo en eso y me basaré en plantillas. Conozco varias pero aquí siempre recibo valiosa información adicional o menos popular que es lo que más me gusta a mí...

El header puede tener media queries que pcultene elementos hasta 768px. Sobre el footer he visto unos que son como una página entera en el footer y son agradables de ver, además se ajustan a loque busco...

Como mi menú tiene un comportamiento desplegable y es casi un manu de saltadores / enlaces ancla a otra sección de la misma página página. Nop pude ajustar los botones con media queries y ya me salió la idea de cambiarlos por algo mejor...
 
Comprendo tu situación, es cierto que diseñar headers y footers responsive puede ser complicado y consumir mucho tiempo de desarrollo. Te recomiendo buscar plantillas en sitios como ThemeForest o en plataformas como Bootstrap y Foundation, que ofrecen plantillas de calidad y responsives para headers y footers.

Respecto al comportamiento de tu menú, es importante que consideres la usabilidad y la accesibilidad al momento de diseñarlo. Tal vez puedas explorar la opción de utilizar un menú de hamburguesa o alguna variación que se adapte bien al diseño que estás buscando. También puedes buscar inspiración en sitios como Dribbble o Behance para encontrar ideas creativas para tu menú.
 
Pon todo dentro de un <div> principal con ancho en px por ejemplo 'cont' y a los divs de adentro le pones de ancho 100%, asi 'controlas' todo, y con media jquery ya solo cambiarias el div "cont", no div x div

<body>

<div class="cont">
<div class="header"></div>
<div class="menu"></div>
<div class="pagina-contenido"></div>
<div class="footer"></div>
</div>

</body>

NO todos los divs separados en <body>

<body>

<div class="header"></div>
<div class="menu"></div>
<div class="pagina-contenido"></div>
<div class="footer"></div>

</body>
 
Última edición: