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='"loading" + 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.
82 comentarios
Hola
ResponderEliminarBienvenida!!! Tomo nota para el nuevo blog. Un beso.
Claro que sí! Deseando verlo. Un gran abarazo virtual.
EliminarMuchí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.
ResponderEliminarDe nada, espero que te sea de utilidad!
EliminarHola!! 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
ResponderEliminarRealmente 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.
EliminarBufff, 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
ResponderEliminarJaja 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.
EliminarMuy 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".
ResponderEliminarEs 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
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.
EliminarHola! una entrada genial y súper completa!! me ha encantado!!
ResponderEliminarNecesito 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
¡Genial! No te pierdas mi siguiente post porque daré unas claves bastante útiles para acometer la personalización del blog
EliminarMe 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.
ResponderEliminarGracias por compartir.
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
EliminarMuy 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.
ResponderEliminarEl diseño queda muy limpio y profesional, me gusta muchísimo.
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í.
EliminarHola Minerva!!
ResponderEliminarHace 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!!
¡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.
EliminarAnda que interesante,no tenia ni ideaaa, veré la demo y probaré s instalarlo.
ResponderEliminarEl rincón de Pau Blog 💗
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.
ResponderEliminarPor 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.
Hola Minerva, es tu trabajo así que claro que si a los créditos!!
ResponderEliminarMil 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.
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¡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.
ResponderEliminarUn abrazo.
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.
EliminarGracias 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.
ResponderEliminarPuedes añadirlas como explico en el primer tutorial de menú responsive que publiqué.
EliminarHola Minerva, gracias por el post ha servido de mucha ayuda :)
ResponderEliminarPero 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!
Hola, me alegra que te sea de utilidad.
EliminarEl 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.
Este comentario ha sido eliminado por el autor.
ResponderEliminarSolucionado, ¡muchas gracias! El buscador me aparece justo debajo de HOME, y está copiado el html igual que en tu post. ¿A qué se debe?
ResponderEliminarMuchas gracias por tu ayuda
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.
EliminarLa biblioteca jQuery ya está enlazada. Pero sigo sin entender que está duplicado en html, no encuentro el error. Muchas gracias!
EliminarMuchas gracias por compartirlo, Minerva, sin duda es de los menús más funcionales que he visto.
ResponderEliminarUna 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.
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!
EliminarMillones 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!
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarMe 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
ResponderEliminarHola. 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.
Eliminarmuy chulo!
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarHola 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!!
ResponderEliminarRevisa el código. Si sigue sin funcionar pásame el link a tu blog para que pueda ver que pasa.
EliminarEsta maravilloso! Gracias.
ResponderEliminarHe 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.
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.
EliminarHola, 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.
ResponderEliminarHola. Deberías revisar el ancho de tu blog en px y con ese dato rectificar esta línea de código: .barra{
Eliminarwidth:1020px;/*ancho del blog*/
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.
ResponderEliminarEs 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/
EliminarHola! 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!
EliminarHola! 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!
ResponderEliminarHola, para poder ayudarte necesitaría link a tu blog para saber qué está pasando. ¿Es posible que tengas muchas categorías?
EliminarVale. Es este, que estoy empezando desde cero: anaml1234.blogspot.com
EliminarGracias!
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
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarME 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??
ResponderEliminarAsí es como funciona.
EliminarBuenas tardes: Muchas gracias por la aportación, un gran menú, llevaba buscando algo así bastante tiempo, pero no consigo que me funcione correctamente.
ResponderEliminarLo 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.
Ya lo he solucionado, de nuevo gracias por compartir tu trabajo.
EliminarHola!
ResponderEliminarMe 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!
Hola, añade un link a tu blog para que pueda ver qué está pasando. Gracias.
EliminarHola !
ResponderEliminarME 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.
graciasssssss =) a full en html,css y una plantilla simple graciassssssssssss
ResponderEliminarSaludos, 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
ResponderEliminarTe 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.
ResponderEliminarMe 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
ResponderEliminarfantástico tutorial, tal es así que en mi nuevo blog he utilizado este menú... solo me queda una duda... solo puede haber un subnivel?
ResponderEliminarExcelente 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.
ResponderEliminarMuchas Gracias!!!!
ResponderEliminarYour method of explaining this article is pleasant, it is simply enough for anyone to understand it. Thanks a lot. High Income Skills Online
ResponderEliminarMuy buena explicación!! aunque me hago un lio con tanto código jaj
ResponderEliminarSee these Scholarship updates
ResponderEliminarCheap Universities In UK
List Britain Scholarships To Study Without IELTS 2022
British Scholarships Without IELTS 2022
Apply for Scholarships in Canada 2022
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
ResponderEliminarIt will be beneficial i really appreciate all your efforts
ResponderEliminarthank you so mch for sharing this valuable information with all of us.
ResponderEliminarI like this a lot. Thank you for sharing.
ResponderEliminarI’m always looking for upcycles like this.
ResponderEliminarThis was an incredible post. Really loved studying this site post.
ResponderEliminarThanks for the useful information. It's more informative and easy to understand.
ResponderEliminarYour post is very great.i read this post this is a very helpful.
ResponderEliminarYou absolutely have wonderful stories.
ResponderEliminarI really like your website.
ResponderEliminarThis is very good and useful information.
ResponderEliminar