• Ir a navegación principal
  • Ir al contenido principal

CASUALWEBS

ANA PASCUAL WEB ESTUDIO

  • Proyectos
  • Tiendas online
  • Hola
  • Blog
  • Contacto

¿Cómo hacer que el encabezado sea fijo en Outfitter Pro?

7 diciembre, 2017 by apascual001

Para hacer que el header o encabezado del tema Outfitter Pro de Genesis se mantenga fijo al hacer scroll, tendremos que hacer los siguientes cambios CSS.

Cambiar la position de relative a fixed del header .

Dar un ancho del 90% para que cuadre la caja del header con la del site-container.

También vemos que al hacer scroll se superponen los artículos al encabezado.  Por ello tendremos que dar un z-index al header inferior.

Por último quitamos el margen que tiene el site-container en la parte superior para fijar el encabezado arriba de todo.

En resumen, el codigo CSS que tenéis que añadir al tema es:

.site-header { 
    position: fixed;
    width: 90%;
    z-index: 1;
}

.site-container {
    padding: 0 20px 20px; 
}

También os dejo las instrucciones sobre como añadir CSS a tu plantilla.

 

 

Archivado en:Outfitter pro, Pequeños cambios, Tips

© 2022 · Aviso legal · Política de privacidad

Esta web solo instalará cookies analíticas y de publicidad si lo aceptas. Puedes informarte más sobre qué cookies estamos utilizando en los ajustes Ajustes Aceptar Rechazar Más información
Política de cookies

Resumen de privacidad

Esta web solo instalará cookies analíticas y de publicidad comportamiento si usted lo acepta. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles. Puede encontrar más información en nuestra política de cookies
Cookies estrictamente necesarias
Siempre activado
Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies. Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.
Cookies analíticas
Esta web utiliza Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares
GUARDAR Y ACEPTAR