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

CASUALWEBS

ANA PASCUAL WEB ESTUDIO

  • Proyectos
  • Tiendas online
  • Hola
  • Blog
  • Contacto

¿Cómo fijar el encabezado en Business Pro y cambiarle el color de fondo al hacer scroll?

4 octubre, 2017 by apascual001

En el tema Business Pro el encabezado que contiene el logo y el menú no se muestra cuando hacemos scroll:

Business Pro on scroll
Business Pro on scroll

Para fijar el encabezado en el tema Business Pro de Genesis vamos a dar una posición fija a todo el header. Para ello tendremos que incluir el siguiente CSS :

/*fijar el encabezado*/
.site-header {
    position: fixed;
}

Para hacer cambios de CSS puedes seguir estas instrucciones.

Una vez aplicado este CSS:

Bussiness Pro fixed header.
Bussiness Pro fixed header.

Vemos que al hacer scroll el menú está fijo pero presenta problemas de lectura al sobreponerse las letras del menú con las del fondo. Para ello daremos un color de fondo que contraste con el blanco de las letras del menú y a la vez mantenga la estética de la plantilla. Le damos al header un color de fondo igual al color rojo destacado.
El CSS necesario:

/*color de fondo en el encabezado al hacer scroll*/
.site-header.shrink {
    background-color: #fb2056;
}

El resultado que veremos es éste:

Encabezado fijo y color de fondo en Bussiness Pro
Encabezado fijo y color de fondo en Bussiness Pro

****Actualización del tema Business Pro*****

Desde la versión (1.0.5 ) se puede fijar el encabezado desde el customizer del panel de administración:

Veámoslo en el video:

Archivado en:Business, Modificar menú, Pequeños cambios

© 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