Soporte » Diseño – Temas y plantillas » storefront – Modificaciones

  • Resuelto mrvs2018

    (@mrvs2018)


    Buenos días .
    Estoy tratando de cambiar la apariencia de storefront.
    Básicamente , lo que quiero hacer es minimizar el tamaño de la cabecera y que los contenidos se vean mas arriba .
    He agregado css en css adicional , pero no consigo lo que deseo. Quizás por mi poca experiencia en css.

    El tamaño de la cabecera es muy grande .

    Cualquier sugerencia es bien recibida .

    Gracias , de antemano.
    Mario R. Vásquez S.

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 4 respuestas - 1 de 4 (de 4 total)
  • La cabecera del theme Storefornt no está pensada para meter un logo de esa forma cuadrada y dimensiones; solo texto o logo rectangular.

    Veo que usas los dos menús con información similar ¿por qué no quitas el secundario y dejas el primario únicamente? a parte tienes una cabecera superior… Puede que te venga mejor usar otro theme o otro modo de menú, uno central con el logo encima de menú o algo así… imaginación al poder, o bien, haces mucho mas pequeño el logo y listo! Prueba con pequeños cambios de css.

    Para hacer cambios en CSS, hazlo desde el personalizador con previsualización (apariencia personalizar) para ir probando si lo necesitas, incluso crea un tema hijo por si quieres meter más mano al theme.

    Suerte!

    Moderador Fernando Tellado

    (@fernandot)

    Como dice @jaimegarmar se pueden hacer muchas modificaciones para reducir el tamaño de la cabecera y resto de elementos mediante CSS.

    Este sería un ejemplo, que puedes adaptar a tus necesidades:

    @media screen and (min-width: 768px) {
        /* LOGO */
        .site-header .site-branding, .site-header .site-logo-anchor, .site-header .site-logo-link { width: 30% !important; /* Use px values if you want, eg. 350px */ }
    
        /* MENÚ SECUNDARIO */
        .site-header .secondary-navigation { width: 40% !important;  /* Use px values if you want, eg. 350px */ }
    
        /* BARRA DE BÚSQUEDA */
        .site-header .site-search { width: 30% !important;  /* Use px values if you want, eg. 350px */ }
    }

    Buenos días , estimados amigos.
    Aplicar ambos consejos mejoraron muchísimo el sitio.
    Completamente agradecido y cerrado el punto.
    muy agradecido.
    Mario R. Vásquez S.

    Moderador Fernando Tellado

    (@fernandot)

    Me alegra haberte ayudado 🙂

Viendo 4 respuestas - 1 de 4 (de 4 total)
  • Debes estar registrado para responder a este debate.