Incrementar tamaño del logo en el tema Hummingbird

[Pedro Rodrigo]

Hola a todos:

¿Alguien sabe como aumentar el alto del logo de la cabecera en el tema Hummingbird de los 48px que tiene por defecto a 80px?

Gracias anticipadas por vuestras respuestas. 

[Pedro Rodrigo]

Me respondo a mi mismo, no se si es la mejor manera pero he subido un custom.css a la carpeta del tema en cuestión con la siguiente configuración

.header-bottom {
    padding: .5rem 0 !important;
    }

.header-bottom .navbar-brand {
    max-height: max(85px,10vh) !important;
    } 

.header-bottom .navbar-brand .logo {
    max-width: 14rem !important;
    max-height: 5rem !important;
    } 

Con mi logo queda bastante bien, quizá en la versión móvil un pelín grande, iré jugando con los valores que he puesto.

[wepresta]

Hola Pedro,

Sí, la forma “limpia” en PrestaShop (y en Hummingbird) es sobrescribir el CSS del tema, así que tu idea con custom.css es totalmente válida 👍

Para dejarlo mejor en desktop (80px) sans que en móvil se vea demasiado grande, puedes hacerlo con media queries y apuntando directamente a la imagen del logo (manteniendo el ratio con width:auto):

/* Desktop: logo más alto */
@media (min-width: 768px) {
  .header-bottom {
    padding: .5rem 0;
  }

  .header-bottom .navbar-brand img.logo,
  .header-bottom .navbar-brand .logo {
    max-height: 80px;
    width: auto;
  }
}

/* Móvil: mantener un tamaño más razonable */
@media (max-width: 767.98px) {
  .header-bottom .navbar-brand img.logo,
  .header-bottom .navbar-brand .logo {
    max-height: 48px; /* ajusta a 56px si lo prefieres */
    width: auto;
  }
}

Importante :

Ponlo en themes/hummingbird/assets/css/custom.css (o el custom.css que cargue tu tema).

Luego vacía la caché: Parámetros avanzados → Rendimiento → Vaciar caché (y si tienes CCC activado, desactívalo temporalmente para probar).

Si tu logo es muy grande, conviene también subir un logo con buena resolución para que no se vea borroso al aumentar altura.

Con eso tendrás 80px en escritorio y un tamaño controlado en móvil sin depender tanto de !important.

[Pedro Rodrigo]

59 minutes ago, wepresta said:

Hola Pedro,

Sí, la forma “limpia” en PrestaShop (y en Hummingbird) es sobrescribir el CSS del tema, así que tu idea con custom.css es totalmente válida 👍

Para dejarlo mejor en desktop (80px) sans que en móvil se vea demasiado grande, puedes hacerlo con media queries y apuntando directamente a la imagen del logo (manteniendo el ratio con width:auto):

/* Desktop: logo más alto */
@media (min-width: 768px) {
  .header-bottom {
    padding: .5rem 0;
  }

  .header-bottom .navbar-brand img.logo,
  .header-bottom .navbar-brand .logo {
    max-height: 80px;
    width: auto;
  }
}

/* Móvil: mantener un tamaño más razonable */
@media (max-width: 767.98px) {
  .header-bottom .navbar-brand img.logo,
  .header-bottom .navbar-brand .logo {
    max-height: 48px; /* ajusta a 56px si lo prefieres */
    width: auto;
  }
}

Importante :

Ponlo en themes/hummingbird/assets/css/custom.css (o el custom.css que cargue tu tema).

Luego vacía la caché: Parámetros avanzados → Rendimiento → Vaciar caché (y si tienes CCC activado, desactívalo temporalmente para probar).

Si tu logo es muy grande, conviene también subir un logo con buena resolución para que no se vea borroso al aumentar altura.

Con eso tendrás 80px en escritorio y un tamaño controlado en móvil sin depender tanto de !important.

Gracias por el consejo de los media queries. Lo haré así. Un saludo