Menú responsive: desplegable con iconos sociales y buscador

8.10.17



En el proceso de diseño de un blog un aspecto que cuido mucho es la navegación. Uno de los menús que más éxito tiene entre mi clientela es el que aprenderás a instalar en este tutorial. El menú admite desplegables (para subcategorías) y se completa con iconos sociales, y buscador, algo muy útil para nuestros lectores. Además se mantiene fijo al desplazar la página y funciona correctamente en móviles mostrando las típicas tres rayitas que al clicar despliegan el menú.

Si me sigues de hace tiempo advertirás que se trata de una actualización del menú que ya adapté en un primer momento añadiendo los iconos sociales. Muchos de mis lectores me pidieron entonces completarlo con un buscador, cosa que en aquel momento no me hacía mucha gracia. Mi intención había sido dar una solución sencilla y ligera al problema que generaba las barras fijas en la plantilla simple de Blogger, esas que puso de moda Miss Lavanda y otras blogueras. Barras que tenían un ancho fijo y no colapsaban en las vistas móviles.

Poner un buscador como el de las plantillas premium exige el uso de jQuery, una biblioteca de JavaScript, que sería una pequeña carga extra para el blog... y acabé dejando correr el tema. Pasado el tiempo dejé prácticamente de publicar, aunque nunca abandoné el blog. He continuado respondiendo a casi todos los comentarios que me llegaban y dando soporte a muchos de los que me habéis escrito personalmente. He participado en preciosos proyectos de diseño que poco a poco iré subiendo al portfolio y a mis redes (recién activo también Instagram)

Una vez acabados los proyectos de rediseño y puesta a punto para el nuevo curso tocaba retomar con ilusión el blog. Mi idea era publicar un post, durante mucho tiempo pospuesto, en el que declaro los típicos errores en diseño que solemos cometer al intentar personalizar el blog,  Pero por casualidades de la vida vengo a publicar este otro. Confieso que este tutorial nace un poco de mi orgullo, y otro tanto de constatar que aún hay necesidad de mejora en Blogger.

Parece que las plantillas responsive nativas de Blogger no son del agrado de todos y cuesta abandonar la tan personalizable plantilla simple. Sin duda este menú está pensado también para ella, si lo probáis en cualquier otra plantilla no es seguro que funcione, de hecho lo más probable es que se convierta en un fiasco y una pérdida de tiempo.

En este renovado menú también he añadido algunas líneas de código en las que solicito la atribución, y aquí viene explicaros la parte de orgullo. El anterior tutorial fue copiado (sin atribución) en diferentes blogs y recientemente ha servido para promocionar un curso de diseño para bloguer@s. Estas cosas me molestan bastante porque yo adapté el menú y cree el tutorial para compartirlo gratuitamente en este blog. Pero lo peor, y lo que más me molesta, es que se altere de manera chapucera añadiendo elementos de otros tutoriales sin unos mínimos conocimientos en programación, dándole un carácter poco profesional.

Todas estas cosas son finalmente las que me han impulsado a retomar de nuevo la cuestión del menú, y espero que ahora sí sea de tu agrado. ¿Que quieres probar que pinta tiene y cómo funciona antes de instalarlo? Claro que sí, pincha en los siguientes enlaces. Recuerda que si estás en el ordenador para simular la vista móvil debes reducir el ancho de la ventana del navegador.

Ver demo del menú responsive

Ver demo del menú simulando la vista móvil

Además del buscador observarás que he modificado un poco el estilo, ahora es algo más minimalista, y funcional. Ya no aparece la palabra menú que causaba problemas cuando no actuaba la vista móvil de Blogger. He ahorrado también espacio al juntar un poco más los iconos sociales. Para facilitar la tarea de personalización las posibilidades de cambio de color se reducen a barra y  texto/iconos. Las tres barras y el indicador de desplegar son más elegantes y se apreciaran igual en los diferentes dispositivos (ahora son iconos fontawesome).

¿Te convence? Pues sigue aquí los pasos para instalarlo.

Instalación paso a paso

Antes de comenzar a trabajar con tu plantilla haz copia de seguridad y habilita la vista móvil de Blogger personalizada   (la que viene por defecto impide que se cargue este menú). Puedes seguir los dos  primeros pasos de este tutorial .  Prepara también el listado de URLs a los que quieres que enlace el menú y los iconos sociales.

1. Instala Font Awesome, la fuente de  iconos web

En el panel de administración de Blogger selecciona la opción plantilla y clica  en el botón Editar HTML. Mediante el buscador (clica a la vez CTRL + F) busca la etiqueta </head>. Justo antes de esta línea de código pega lo siguiente:

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

2. Crea el HTML de tu menú

Este menú está pensado para que permanezca fijo en la zona superior de la pantalla por lo que deberás copiar el siguiente código después de la etiqueta <body> de tu blog, si tienes instalada la plantilla simple de Blogger te aparecerá algo más larga, tal que así  <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>.

Personaliza el siguiente código y añádelo justo debajo del body.

<nav id='menu'>
    <div class='barra'>
        <input type='checkbox'/>
        <label><i aria-hidden='true' class='fa fa-bars'/></label>
        <ul class='principal'>
            <li><a href='/'>Inicio</a></li>
            <li><a href='#'>Sobre mí</a></li>
            <li><a href='#'>Categorías <i class="fa fa-chevron-down"></i></a>
                <ul class='menus'>
                <li><a href='#'>Categoría 1</a></li>
                <li><a href='#'>Categoría 2</a></li>
                <li><a href='#'>Categoría 3</a></li>
                </ul>
               </li>
            <li><a href='#'>Contacto</a></li>
        </ul>
        <div class='iconos'>
            <a href='#'><i aria-hidden='true' class='fa fa-twitter'/></a>
            <a href='#'><i aria-hidden='true' class='fa fa-facebook'/></a>
            <a href='#'><i aria-hidden='true' class='fa fa-instagram'/></a>
            <a href='#'><i aria-hidden='true' class='fa fa-pinterest-p'/></a>
        </div>
        <div id='buscador'>
            <a href='#'><i class='fa fa-search'/></a>
        </div>
        <div class='busqueda'>
            <form action='/search' id='searchform' method='get' role='search'>
                <div><input id='s' name='q' placeholder='Escribe y pulsa enter...' type='text'/></div> 
            </form>    
        </div>
     </div>
</nav>

Si deseas añadir más categorías deberás abrir nuevas etiquetas <li>. Si tienes dudas de cómo hacerlo consulta el punto en el que hablo de listas en mi entrada  marcado de texto en HTML.

Los iconos sociales se añaden mediante etiquetas <i> con la clase que nos da la página oficial de la fuente Awesome. Cada red social se representa en una línea, por ejemplo:

<a href='#'><i aria-hidden='true' class='fa fa-twitter'/></a>

El signo de parrilla debes sustituirlo por la URL donde quieres que enlace cada categoría o icono.

3. Añade el código CSS

Ahora desplázate en tu plantilla hasta este código ]]></b:skin> . Justo antes pega las siguientes líneas:

/*-----------------------------------------------
Menu responsive de MBT modificado por Minerva Aurora
Tutorial disponible en http://minervaurora.blogspot.com/2017/10/menu-responsive-desplegable-iconos-sociales-buscador.html
Libre para uso personal manteniendo la atribución intacta
----------------------------------------------- */
body {
margin: 0px;
padding-right: 0px;
padding-left: 0px;
}
.barra{
width:1020px;/*ancho del blog*/
margin:0 auto;
position: relative;
}
#menu{
background: #F1F1F1;/* color de la barra*/
color: #333;/*color de las tres barritas*/
height: 50px;
border-bottom: 1px solid rgba(0,0,0,.05);
width:100%;
position:fixed; 
z-index:101; 
}
#menu ul,#menu li{
margin: 0px auto;
padding:0 0;
list-style:none;
}
#menu .iconos{
float:right;
margin-right: 50px;
}
#menu li{
float:left;
display:inline;
position:relative;
font: 11px Arial, sans-serif;/*tamaño y fuente del texto */
}
#menu ul a{
display: block;
line-height: 50px;
padding: 0 14px;
text-decoration: uppercase;
color: #333;/*color del texto*/
text-transform: uppercase;
letter-spacing: 1.5px;/*espacio entre letras*/
}
#menu li a:hover{
color: #999;/* color del texto al pasar el ratón*/
text-decoration: none;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#menu input{
display:none;
margin:0 0;
padding:0 0;
width:50px;
height:50px;
opacity:0;
cursor:pointer
}
#menu label{
display:none;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 17px;
vertical-align: middle;
}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 170px;
background: #F1F1F1;/*color del fondo del submenu*/
position: absolute;
z-index: 99;
display: none;
border: 1px solid rgba(0,0,0,.05);
}
#menu ul.menus li{
display: block;
width: 100%;
font: 11px  Arial, sans-serif;/*tamaño y fuente del  texto del submenu*/
text-transform: uppercase;
border-bottom: 1px solid #E9E9E9;
}
#menu ul.menus li:last-child{
border-bottom:none;
}
#menu ul.menus a{
color: #333;/*color del  texto del submenu*/
line-height: 35px;
}
#menu li:hover ul.menus{
display:block;
}
#menu ul.menus a:hover{
color: #999;/*color del  texto del submenu al pasar el ratón*/
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.iconos a{
padding: 0 10px;
height: 50px;
display: inline-block;
}
#menu .iconos .fa{
font-size:14px;
line-height: 50px;
color: #333;/*color del icono social*/
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#menu ul .fa{
font-size: 8px;
position: relative;
top: -1px;
}
#menu .iconos .fa:hover{
color: #999;/*color del icono social al pasar el ratón*/
}
#menu .iconos::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 10px;
    background-color: #000;
    margin-left: 5px;
    opacity: .1;
}
#buscador {
position:absolute;
right:0;
top:0px;
width:50px;
text-align:center;
}
#buscador a {
height: 50px;
font-size: 14px;
line-height: 50px;
color: #333;
display: block;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
width: 50px;
}
#buscador a:hover {
color:#999;
}
.busqueda{
position:absolute;
top:50px;
right:0px;
display:none;
z-index:10000;
}
.busqueda #searchform input#s {
border: 1px solid #e5e5e5;
width:190px;
background:#FFF;
padding: 7px 10px;
font-size: 12px;
color: #999;
letter-spacing: 1px;
display:block;
opacity:1;
}
.busqueda #searchform input#s:focus {
border:1px solid #d5d5d5;
}
@media screen and (max-width: 800px){ 
#menu{
position:fixed; 
z-index:101; 
}
#menu ul{
background:#F1F1F1;/*color del desplegable del menu movil*/
position:absolute;
top:100%;
right:0;
left:0;
z-index:3;
height:auto;
display:none
}
#menu ul.menus{
width:100%;
position:static;
padding-left:20px
}
#menu li{
display:block;
float:none;
width:auto;
font: 11px  Arial, sans-serif;
 }
#menu ul a{
 display: block;
 line-height: 40px;
 padding: 0 14px;
}
#menu input,#menu label{
position:absolute;
top:0;
left:0;
display:block;
}
#menu input{
z-index:4
}
#menu input:checked + label{
color:#333;/*color de las tres barritas una vez se clica*/
}
#menu input:checked ~ ul{
display:block;
top: 50px;
}
.barra{
width:95%!important;
}
.busqueda{
right:212px!important;
}
}
header{
padding-top:50px;
}
/*-----fin menu responsive-----*/

Lo primero que deberás personalizar es el ancho del menú. En la siguiente línea cambia 1020px por el ancho de tu blog.

.barra{
width:1020px;/*ancho del blog*/
margin:0 auto;
}

El resto de elementos susceptibles de ser personalizados los encuentras comentados en el código de esta manera /*--- comentario ---*/

La última regla empuja la cabecera hacia abajo para que no quede tapada por el menú. Está programada sólo para la plantilla simple de Blogger, si usas otra plantilla posiblemente no funcionará bien.
header{
padding-top:50px;
}

4. Añade el script de funcionamiento del buscador

Busca la etiqueta </html>, y justo antes de ella copia el siguiente código:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script> $(document).ready(function(){ $('#buscador a').on('click', function(e) { e.preventDefault(); $('.busqueda').slideToggle('fast'); }); }); </script>

La primera línea de código carga la biblioteca jQuery necesaria para que se entienda la siguiente línea, y aparezca la cajetilla de búsqueda. Si ya la tienes enlazada en tu blog porque la añadistes en otro tutorial óbviala, no dupliques la llamada. El script es tan sumamente sencillo que te servirá cualquier versión de jQuery, aunque sea más antiguo.


Guarda los cambios hechos y comprueba si funciona en tu blog el nuevo menú responsive.
Si algo se resiste revierte los cambios en la plantilla (CTRL + Z) y vuelve a intentarlo, a veces una simple llave mal cerrada puede causar estragos. Si aún sigue sin funcionar eres libre de comentar aquí abajo tu incidencia.

Entradas relacionadas

72 comentarios

  1. Hola
    Bienvenida!!! Tomo nota para el nuevo blog. Un beso.

    ResponderEliminar
  2. Muchísimas gracias, llevaba semanas buscando algo similar y no daba con ello al fin voy a poner mi blog como quiero. Gracias de corazón.

    ResponderEliminar
  3. Hola!! Me encanta que haya artículos como el tuyo por la red, nos ayudáis mucho a la que estamos perdidas con estos temas. Una de las razones por las que deje Blogger fue que no encontraba una plantilla que se adaptara a lo que buscaba. Seguramente si hubiera conocido tu blog entonces no habría cambiado. Es un paso laborioso el que enseñas pero sí da sus frutos bienvenido sea. Besos

    ResponderEliminar
    Respuestas
    1. Realmente es una pena que muchas os paseís a Wordpress por pequeños detalles como éstos. Todo es cuestión de encontrar plantillas con estas funcionalidades. En Blogger hay menos oferta pero te puedo asegurar que para las necesidades de un blog encuentras plantillas la mar de apañadas.

      Eliminar
  4. Bufff, me cuesta un poco seguirte, muy técnico para mí. Necesitará una segunda lectura. Pero viene fenomenal ya que gran parte de mi tráfico viene por móvil. Gracias

    ResponderEliminar
    Respuestas
    1. Jaja sí la lectura es un poco árdua si no se está familiarizado con estos tipos de tutoriales, pero pasito a pasito y consultando el resto de post que enlazo se puede seguir. Un saludo.

      Eliminar
  5. Muy buena entrada, felicidades, me gusta mucho que al final hayas denegado la propuesta de jquery porque a parte de añadirle más carga a blogger no funciona muy bien con todas las plantillas y hay gente a la que le "estropea más que ayuda".
    Es muy importante tener un buen menú responsive en el blog porque las búsqueda móviles cada vez son mayores y con detalles así de sencillos hacemos que nuestros blogs sean mucho mejores.
    Un saludo

    ResponderEliminar
    Respuestas
    1. Bueno...la intención era prescindir de esa carga, pero al final la añadí para el buscador. Le daré una vuelta a los códigos a ver si puedo evitarla. Gracias por comentar.

      Eliminar
  6. Hola! una entrada genial y súper completa!! me ha encantado!!
    Necesito un menú responsive en mi blog, la verdad es que estoy pensando en darle un cambio al look de mi blog, la cabecera, la plantilla, un poco todo, de vez en cuando me gusta cambiarlo y ahora ya llevo una temporada bastante larga sin hacerle ningún cambio. Tomo nota de todos los consejos!!
    Gracias por el post!
    Besos

    ResponderEliminar
    Respuestas
    1. ¡Genial! No te pierdas mi siguiente post porque daré unas claves bastante útiles para acometer la personalización del blog

      Eliminar
  7. Me ha encantado esta entrada, es muy práctica y útil. Yo hace tiempo que estoy pensando en cambiar el aspecto y el diseño de un blog que tengo, pero nunca me acababa de decidir por una plantilla, o sea que tomo nota de todos tus consejos y voy a ver si consigo cambiarlo.
    Gracias por compartir.

    ResponderEliminar
    Respuestas
    1. Esto de elegir plantillas es todo un arte. Tengo pensado un post para dar unas pautas útiles. Pero de momento yo te diría que escogieras dentro de las más nuevas y revisar siempre cómo trabajan en responsive. Un saludo

      Eliminar
  8. Muy bien explicada la entrada. Yo ando todavía un poco perdida en cuanto a los temas para el blog, cómo personalizarlos y añadir o quitar cosas. La verdd que se agradecen artículos como el tuyo y que podamos entender.
    El diseño queda muy limpio y profesional, me gusta muchísimo.

    ResponderEliminar
    Respuestas
    1. La verdad que personalizar el blog es algo muy necesario pero tampoco hace falta obsesionarse con cambiarlo todo. Es más práctico escoger una buena plantilla y modificar aquello que nos permita de manera fácil. Muchas gracias por pasarte por aquí.

      Eliminar
  9. Hola Minerva!!
    Hace tiempo quise cambiar el diseño de mi blog con menú responsive desplegable, con iconos de las diferentes redes sociales y buscador. Elegí una plantilla, se la enseñé a mi hermano informático y le expliqué los cambios que quería, en definitiva, es él el que se encarga de todo este tema que para mí es muy complicado pero es muy importante para que nuestros blogs tengan una buena imagen, sean atractivos,... para nuestros seguidores.
    Hay que tener en cuenta que la mayor parte de nuestros seguidores (al menos los míos sí) ven nuestros post a través el móvil, así que hay que tenerlo en cuenta a la hora del diseño del blog, del menú,...
    Un post muy interesante. Un beso guapa!!

    ResponderEliminar
    Respuestas
    1. ¡Hola guapa! Muy bien que hiciste eligiendo una plantilla responsive, además es la misma que tenía mi blog hace un año, pero cuidado acuérdate de desactivar la vista móvil de Blogger. No sé si lo has dejado a propósito...estoy viendo un problemilla que tienes en el menú de la plantilla, probablemente se tocó código allí. Contacta conmigo y lo miramos. Un saludo.

      Eliminar
  10. Anda que interesante,no tenia ni ideaaa, veré la demo y probaré s instalarlo.

    El rincón de Pau Blog 💗

    ResponderEliminar
  11. Desde ya te digo que me he guardado este post en favoritos. Pero me da mucho miedo tocar el html, así que igual me abro un blog de pruebas, que para cerrarlo a tiempo estoy, como toque algo que no debo...Lo del menú desplegable es algo que estaba pensando, pero cuando tenga tiempo para hacerlo con calma.
    Por otro lado, me surge la duda de tener las redes por duplicado, arriba y los iconos que tenemos casi todas, ¿no es contraproducente?
    Muchas gracias por el post, espero ponerme manos a la obra y mejorar un poco mas mi rincón...Bss.

    ResponderEliminar
  12. Hola Minerva, es tu trabajo así que claro que si a los créditos!!
    Mil gracias por el menú, es muy completo. Te agradezco mucho también el tiempo que te tomaste para explicar tan bien todo porque me paso que al comienzo no me andaba el buscador hasta que leí bien y resulto que estaba haciendo doble llamada.

    De todo los menús que encontré este es el que mas me gusta aunque estaría buenísimo si se pudiera poner un pequeño header para los que no son muy fan de headers gigantes como yo. En general, muy bueno tu trabajo te felicito!!!

    Y otra vez, muchas gracias.

    ResponderEliminar
    Respuestas
    1. De nada, me alegra que te funcione al final. Sobre lo del header no se muy bien a que te refieres, a la cabecera del blog?

      Eliminar
  13. ¡Hola Minerva! Hace mucho tiempo que andaba en busca de un menú despegable tan completo como el tuyo y ahora que estoy cambiando por completo el diseño de mi blog me viene como anillo al dedo. Por lo que vi ya no estas activa, pero de igual forma quería darte las gracias por darte el tiempo de explicarlo tan bien. Los créditos si o si irán cuando presente el nuevo diseño, nuevamente gracias.
    Un abrazo.

    ResponderEliminar
    Respuestas
    1. Gracias a ti por el feedback. A veces dudo si realmente mi ayuda llega ;) No publico de forma regular pero no abandono el blog. Es una ventaja de la plataforma Blogger, si tuviera que pagar un servidor tendría remordimientos seguro y acabaría abandonándolo. Un saludo.

      Eliminar
  14. Gracias por el aporte, esta bien explicado y al fin puedo ver el menú adecuadamente en el móvil, pero no se como crear subcategorías, para añadir más opciones, sería otro buen aporte. Gracias.

    ResponderEliminar
    Respuestas
    1. Puedes añadirlas como explico en el primer tutorial de menú responsive que publiqué.

      Eliminar
  15. Hola Minerva, gracias por el post ha servido de mucha ayuda :)
    Pero he tenido un problema en la parte derecha donde se encuentran los iconos de redes sociales, puse tres, solo me aparecen dos de ellos (no se encuentran centrados sino más hacia abajo) y no me aparece siquiera el buscador. ¿Cúal es el problema?

    ¡Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Hola, me alegra que te sea de utilidad.
      El icono que te está desmontando todo es el último, si lo quitas desaparece el problema. El código del buscador no aparece, revisa que lo tengas tras los iconos.

      Eliminar
  16. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  17. Solucionado, ¡muchas gracias! El buscador me aparece justo debajo de HOME, y está copiado el html igual que en tu post. ¿A qué se debe?
    Muchas gracias por tu ayuda

    ResponderEliminar
    Respuestas
    1. Revisa el código, tienes el buscador duplicado en html y has variado el CSS de div #buscador. Tampoco me aparece enlazada la biblioteca jquery.

      Eliminar
    2. La biblioteca jQuery ya está enlazada. Pero sigo sin entender que está duplicado en html, no encuentro el error. Muchas gracias!

      Eliminar
  18. Muchas gracias por compartirlo, Minerva, sin duda es de los menús más funcionales que he visto.
    Una duda, hay modo de ponerlo debajo del header y que siga siendo fijo? Lo he intentado en la plantilla pero resulta un desastre. Ojalá se pueda y de nuevo gracias. Saludos.

    ResponderEliminar
    Respuestas
    1. Hola, creo que lo que estás buscando es un menú sticky. Haz una búsqueda por Google, seguro que encuentras más de un tutorial. Un saludo!

      Eliminar
  19. Millones de gracias por el tutorial. Lo de la atribución, me parece estupendo, y me identifico. Fastidia mucho trabajar y echar un cable a alguien, para que luego ni siquiera te dé las gracias por ello. Yo también lo he sufrido. Así que...¡chapeau por ti!

    ResponderEliminar
  20. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  21. Me encantó, excelente trabajo, me gustaría saber si se puede cambiar los iconos a la izquierda y el menú a la derecha, porq normalmente es más cómodo para el dedo pulgar derecho clickear sobre un menú derecho

    ResponderEliminar
    Respuestas
    1. Hola. Aunque es posible hacerlo la adaptación no es del todo fácil, debería cambiar más de una línea de código.

      Eliminar
  22. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  23. Hola Minerva! El menú me quedó todo perfecto, menos un icono que añadí que no se ve y no sé el por qué. Muchas gracias!!

    ResponderEliminar
    Respuestas
    1. Revisa el código. Si sigue sin funcionar pásame el link a tu blog para que pueda ver que pasa.

      Eliminar
  24. Esta maravilloso! Gracias.
    He visto algunos blogs que tienen en logo o nombre en la barra de menú al lado izquierdo. (Como el paso a paso de Monica Lemos) ¿Como puedo hacer eso?. Gracias nuevamente.

    ResponderEliminar
    Respuestas
    1. Hola. Sería posible añadir a la lista un elemento que fuera una imagen. Necesitarías dominar un poco de código CSS para adaptarla si fuera demasiado grande.

      Eliminar
  25. Hola, tengo tu menú en mi blog. pero mi pregunta es... ¿Cómo puedo centrar las pestañas? aunque sea un poco que están muy a la izquierda. Espero tu respuesta.

    ResponderEliminar
    Respuestas
    1. Hola. Deberías revisar el ancho de tu blog en px y con ese dato rectificar esta línea de código: .barra{
      width:1020px;/*ancho del blog*/

      Eliminar
  26. Hola Minerva! Te comento que tengo este menu en mi blog y ahora coloque unos nuevos iconos de awesome pero los anteriores que tenia en el menú desaparecieron. Me doy cuenta que los códigos son diferentes. ¿Que debo hacer en este caso para recuperar los iconos del menú? Gracias por tu ayuda.

    ResponderEliminar
    Respuestas
    1. Es posible que hayas utilizado la nueva versión de fontawesome 5.4 cuyo funcionamiento y código es diferente. Los códigos de la que yo uso las encuentras aquí https://fontawesome.com/v4.7.0/

      Eliminar
    2. Hola! Efectivamente el asunto era el código de la nueva versión. Como estoy colocando nuevos iconos en otra entrada de mi blog necesitaba colocar el código nuevo y eso me afecto los del menú. Lo que hice fue sustituir también el código de los iconos de tu menú y resuelto el problema! La atribución quedo intacta. Muchisimas gracias desde Venezuela!

      Eliminar
  27. Hola! He seguido el tutorial pero me pone los iconos en vertical en vez de en horizontal, excepto el buscador que lo pone correctamente. La plantilla está hecha desde cero, con la plantilla mínima y no tiene nada más. No sé cuál puede ser el problema. Gracias!

    ResponderEliminar
    Respuestas
    1. Hola, para poder ayudarte necesitaría link a tu blog para saber qué está pasando. ¿Es posible que tengas muchas categorías?

      Eliminar
    2. Espacio Crochetmartes, enero 29, 2019

      Vale. Es este, que estoy empezando desde cero: anaml1234.blogspot.com
      Gracias!

      Eliminar
    3. Perdona, que lo tenía privado... Qué desastre. Ya lo he cambiado. He copiado el código tal cual, ni siquiera he añadido mis categorías. No sé dónde puede estar el problema... Gracias

      Eliminar
  28. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  29. ME GUSTA EL MENO XQ ES RESPONSIVE PERO DESEARÍA QUE SE QUEDARA QUIERO EN LA PARTE DE ARRIBA Y NO SE BAJE CUANDO MUEVES EL MOUSE??

    ResponderEliminar
  30. Buenas tardes: Muchas gracias por la aportación, un gran menú, llevaba buscando algo así bastante tiempo, pero no consigo que me funcione correctamente.
    Lo he probado en el blog https://pruebadiegomor.blogspot.com y en la vista de ordenador funciona correctamente, pero no aparece en la vista móvil. Espero que puedas echarme una mano.
    Gracias.

    ResponderEliminar
    Respuestas
    1. Ya lo he solucionado, de nuevo gracias por compartir tu trabajo.

      Eliminar
  31. Diandra Oyarzunlunes, abril 29, 2019

    Hola!

    Me encantado tu menú, pero he tenido algunos problemas, al momento de clikear el la lupita de búsqueda el recuadro de besuqueada aparece y desaparece de inmediato, sin darme tiempo para interactuar con ella! cómo podría solucionarlo!
    Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Hola, añade un link a tu blog para que pueda ver qué está pasando. Gracias.

      Eliminar
  32. Hola !

    ME ENCANTAAA!!justo lo que buscaba!! algo fijo. Comenzare de nuevo, Estaba a punto de abandonar blogger, si le pongo color solo al menù ni se alterara la plantilla no? mil gracias... Te mostrare avances.

    ResponderEliminar
  33. graciasssssss =) a full en html,css y una plantilla simple graciassssssssssss

    ResponderEliminar
  34. Saludos, gracias por tu aporte con este MENU, pero tengo un problema con la versión MOVIL, la palabra MENU me sale en VERTICAL y no en HORIZONTAL, podrias ayudarme.... Gracias

    ResponderEliminar
  35. Te felicito por el tutorial; fácil y sencillo. No me quedo a la primera pero al final resulto bien. Muchas Gracias porque pase por varios blogs respecto a este tema y ninguno funcionaba.

    ResponderEliminar
  36. Me encantó el tutorial, solo tuve un problema, ya que el menú no llega hasta arriba, algo tuve que hacer mal. Lo personalice y todo y me encanta, aun no lo termino de personalizar, pero solo me quedaría como duda, que llegue hasta arriba. Saludos

    ResponderEliminar
  37. fantástico tutorial, tal es así que en mi nuevo blog he utilizado este menú... solo me queda una duda... solo puede haber un subnivel?

    ResponderEliminar
  38. Excelente información me gusto mucho, estoy cerca de comenzar en esta web https://1cursos.com/f-curso-de-desarrollo-web el curso de desarrollo web ya necesito actualizar mis conocimientos técnicos y tecnológicos.

    ResponderEliminar
  39. Your method of explaining this article is pleasant, it is simply enough for anyone to understand it. Thanks a lot. High Income Skills Online

    ResponderEliminar
  40. Muy buena explicación!! aunque me hago un lio con tanto código jaj

    ResponderEliminar
  41. I am thankful to you for sharing this plethora of useful information. I found this resource utmost beneficial for me. Thanks a lot for hard work. Also visit download unical post utme past questions and answers

    ResponderEliminar