Logo para Móvil

 

 

Para que el header o logotipo de la Página se vea bien en un dispositivo móvil es recomendable tener la imagen de 320 pixeles de ancho y 76 pixeles de alto (el alto puede variar).

Pero, si además del encabezado tienes un menú de 3 o más pestañas, entonces si es recomendable que el alto del encabezado no exceda los 76 pixeles de alto.

Al desarrollar una Página en WordPress con formato móvil veo que si el ancho de la imagen del header es mayor a 320 pixeles, automáticamente se pierde en formato móvil. Para que el logotipo se vea bien en formato móvil hay que hacer lo siguiente:

1.- El ancho de la imagen debe ser 320 pixeles.
2.- Modificar el header.php (de ese Theme) y después de esta línea:

<?php if(theme_has_layout_part(“header”)) : ?> <header><?php get_sidebar(‘header’); ?>

AGREGAR:

<div><a href=”<?php echo home_url() ?>” target=”_self” title=”Ricomer Logo”><img width=”320″ title=”Ricomer Logo” src=”http://ricomer.qrmexico.com/imagenes/RicomerLogo320.jpg” alt=”Ricomer Logo” /></a></div>

3.- El header anterior ya no debe de tener el logotipo, porque esta línea de código lo pone.

Descubrí también que la imagen puede ser un poco más ancha, como de 360 pixeles y estará encima del header principal, y cuando se hace responsive, el header principal se desaparece, pero la nueva imagen que incluimos de 320 o 360 pixeles si se mantiene visible. Recuerda definir el width=”320″, “360”, o sea, el ancho real de tu imagen.

Otra cosa: Si no quieres que el Eslogan aparezca en el modo móvil, lo puedes quitar comentarizando con ( // )  las líneas del slogan en el archivo: style.responsive.css

 

OTRA OPCION:

Si no funciona la opción anterior y  quieres mantener el encabezado de tu Página Web (con todos los elementos), pero no se ve nada en el modo móvil; solamente haz lo siguiente:

1.- Crea una imagen del ancho del móvil  (320 px de ancho y 76px aproximadamente de alto) y guardala en la carpeta de /images.

2.- Modifica el archivo style.responsive.css y listo!

.responsive .inf-header

{

width: 320px;

height: auto;

min-height: 70px;

margin-right: auto;

margin-left: auto;   

background-image: url(‘images/ZaafiroLogo320_76.jpg’);

background-position: center center !important;

background-size: cover !important;

background-repeat: repeat !important;

}

 

Por último, si quieres quitar las etiquetas de: published by, category, tag, etc.  lo puedes hacer en los archivos: content-single.php y content.php

Aquí puedes probar la Página en Internet y en Móvil:

http://Ricomer.QRMexico.com