Home Diseno Responsive Menu Responsive para Blogger Menú Responsive desplegable para Blogger

Menú Responsive desplegable para Blogger

¿Cómo insertar de forma fácil y segura un Menú desplegable Responsive, que cuando se habrá mi blog en una computadora de escritorio funcione el menú desplegable y que luego cuando se habrá mi blog desde un teléfono inteligente Smartphone se visualice un Menú Responsive “Sensible”? Esta pregunta está bien planteada por parte de los usuarios que solicitan a diario, en ¿cómo agregar correctamente un Menú totalmente Responsive “Sensible” en su blog de Blogger? que funcione en un computador de escritorio y en un teléfono. Para hacerles las cosas más sencillas he creado este grandioso tutorial con el cual se van a guiar para implementar este Menú Responsive en su blog de Blogger.


Para ver su demostración en mi blog de demos siga las siguientes instrucciones:

Primero: Para visualizar el Menú desplegable desde un computador de escritorio ingrese a la siguiente dirección


Segundo: Para poder visualizar el Menú desplegable Responsive “Sensible” desde un teléfono, puede reducir la pantalla de su navegador para ver su funcionamiento o puede también ingresar la dirección URL del demo para verlo desde su teléfono inteligente


¡Te gusto verdad!

Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Plantilla”


3 Un clic en “Editar HTML”


Ahora se le abrirá el Editor HTML de su plantilla


En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.


4 Busca este código

<head>

Menú Responsive desplegable para Blogger

Ingrese las siguientes líneas de código justo abajo del código que encontró

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>   
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

5 Busca este código

</b:skin>

Menú Responsive desplegable para Blogger

Ingrese los siguientes estilos justo abajo del código que encontró

<style>
nav {
  display: block;
  background: #E95546;
}

.menu { display: block; }

.menu li {
  display: inline-block;
  position: relative;
  z-index: 100;
}

.menu li:first-child { margin-left: 0; }

.menu li a {
  font-weight: 600;
  text-decoration: none;
  padding: 20px 15px;
  display: block;
  color: #fff;
  transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover,
.menu li:hover&gt;a {
  color: #fff;
  background: #FC6D58;
}

.menu ul {
  visibility: hidden;
  opacity: 0;
  margin: 0;
  padding: 0;
  width: 170px;
  position: absolute;
  left: 0px;
  background: #fff;
  z-index: 99;
  transform: translate(0, 20px);
  transition: all 0.2s ease-out;
}

.menu ul:after {
  bottom: 100%;
  left: 20%;
  border: solid transparent;
  content: &quot; &quot;;
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #fff;
  border-width: 6px;
  margin-left: -6px;
}

.menu ul li {
  display: block;
  float: none;
  background: none;
  margin: 0;
  padding: 0;
}

.menu ul li a {
  font-size: 12px;
  font-weight: normal;
  display: block;
  color: #797979;
  background: #fff;
}

.menu ul li a:hover,
.menu ul li:hover&gt;a {
  background: #FC6D58;
  color: #fff;
}

.menu li:hover&gt;ul {
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0);
}

.menu ul ul {
  left: 169px;
  top: 0px;
  visibility: hidden;
  opacity: 0;
  transform: translate(20px, 20px);
  transition: all 0.2s ease-out;
}

.menu ul ul:after {
  left: -6px;
  top: 10%;
  border: solid transparent;
  content: &quot; &quot;;
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #fff;
  border-width: 6px;
  margin-top: -6px;
}

.menu li&gt;ul ul:hover {
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0);
}

.responsive-menu {
  display: none;
  width: 100%;
  padding: 20px 15px;
  background: #E95546;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
}

.responsive-menu:hover {
  background: #E95546;
  color: #fff;
  text-decoration: none;
}

a.homer { background: #FC6D58; }

@media (min-width: 768px) and (max-width: 979px) {

.mainWrap { width: 768px; }

.menu ul { top: 37px; }

.menu li a { font-size: 12px; }

a.homer { background: #E95546; }

}

@media (max-width: 767px) {

.mainWrap {
  width: auto;
  padding: 50px 20px;
}

.menu { display: none; }

.responsive-menu { display: block; }

nav {
  margin: 0;
  background: none;
}

.menu li {
  display: block;
  margin: 0;
}

.menu li a {
  background: #fff;
  color: #797979;
}

.menu li a:hover,
.menu li:hover&gt;a {
  background: #FC6D58;
  color: #fff;
}

.menu ul {
  visibility: hidden;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  transform: initial;
}

.menu li:hover&gt;ul {
  visibility: visible;
  opacity: 1;
  position: relative;
  transform: initial;
}

.menu ul ul {
  left: 0;
  transform: initial;
}

.menu li&gt;ul ul:hover { transform: initial; }

}

</style>

6 Busca este código

</head>

Menú Responsive desplegable para Blogger

Ingrese el siguiente script justo arriba del código que encontraste

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

Nota importante: Si ya utilizas un script - jquery.min.js en tu blog de Blogger ya no es necesario insertar las anteriores líneas de código, pero si no utilizas ningún script - jquery.min.js en tu blog de Blogger proceda a insertar el código indicado

7 Busca este código

<body>

Nota: Si no encuentras dicho código puedes buscar el siguiente código, ya que en las nuevas plantillas puede venir un código similar al siguiente:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Menú Responsive desplegable para Blogger

Ingresa las siguientes líneas código justo abajo del código que encontraste

<nav>
  <a class='responsive-menu' href='#' id='resp-menu'>
   <i class='fa fa-reorder'/> Menu</a>
   <ul class='menu'>
     <li><a class='homer' href='/'><i class='fa fa-home'/> Inicio</a>
    </li>
    <li><a href='#'><i class='fa fa-tags'/> Noticias</a>
      <ul class='sub-menu'>
        <li><a href='#'>Sub-Menu 1</a></li>
        <li><a href='#'>Sub-Menu 2</a></li>
        <li><a href='#'>Sub-Menu 3</a></li>
        <li><a href='#'>Sub-Menu 4</a></li>
        <li><a href='#'>Sub-Menu 5</a></li>
      </ul>
    </li>
    <li><a href='#'><i class='fa fa-tags'/> Entretenimiento</a>
      <ul class='sub-menu'>
        <li><a href='#'>Sub-Menu 1</a></li>
        <li><a href='#'>Sub-Menu 2</a></li>
        <li><a href='#'>Sub-Menu 3</a></li>
        <li><a href='#'>Sub-Menu 4</a></li>
        <li><a href='#'>Sub-Menu 5</a></li>
      </ul>
    </li>
 <li><a href='#'><i class='fa fa-tags'/> Videos</a>
      <ul class='sub-menu'>
        <li><a href='#'>Sub-Menu 1</a></li>
        <li><a href='#'>Sub-Menu 2</a></li>
        <li><a href='#'>Sub-Menu 3</a></li>
        <li><a href='#'>Sub-Menu 4</a></li>
        <li><a href='#'>Sub-Menu 5</a></li>
      </ul>
    </li>
 <li><a href='#'><i class='fa fa-tags'/> Tecnología</a>
      <ul class='sub-menu'>
        <li><a href='#'>Sub-Menu 1</a></li>
        <li><a href='#'>Sub-Menu 2</a></li>
        <li><a href='#'>Sub-Menu 3</a></li>
        <li><a href='#'>Sub-Menu 4</a></li>
        <li><a href='#'>Sub-Menu 5</a></li>
      </ul>
    </li>
<li><a href='#'><i class='fa fa-envelope'/> Contactos</a></li>
  
</ul>
</nav>

Realiza estos cambios:

Cambia todos los nombres que están marcados de color Rojo, por el nombre que desees

Elimina todos los símbolos numerales que están marcados de color Azul “#” y remplaza cada uno de ellos por las direcciones URLs de los post que quieras dar a conocer en tu menú desplegable

Si necesitas aumentar otras categorías, puedes copiar el siguiente código justo arriba del código que está marcado de color Verde </ul>

<li><a href='#'><i class='fa fa-tags'/> Nueva categoría</a>
      <ul class='sub-menu'>
        <li><a href='#'>Sub-Menu 1</a></li>
        <li><a href='#'>Sub-Menu 2</a></li>
        <li><a href='#'>Sub-Menu 3</a></li>
        <li><a href='#'>Sub-Menu 4</a></li>
        <li><a href='#'>Sub-Menu 5</a></li>
      </ul>
    </li>

8 Busca este código

</body>

Menú Responsive desplegable para Blogger

Ingresa las siguientes líneas de código justo arriba del código que encontraste

<script>
$(document).ready(function(){
  var touch   = $(&#39;#resp-menu&#39;);
  var menu  = $(&#39;.menu&#39;);

  $(touch).on(&#39;click&#39;, function(e) {
    e.preventDefault();
    menu.slideToggle();
  });
 
  $(window).resize(function(){
    var w = $(window).width();

    // breakpoint
    if(w &gt; 767 &amp;&amp; menu.is(&#39;:hidden&#39;)) {
      menu.removeAttr(&#39;style&#39;);
    }
  });
 
});
  </script>

9 Eso es todo, es momento de dar un clic en “Guardar plantilla”

Menú Responsive desplegable para Blogger

Visite su blog de Blogger y mire cómo funciona este fascinante Menú desplegable en su computador de escritorio y cómo funciona el Menú desplegable si lo abrimos desde un teléfono inteligente.

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si

TAGS:


Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

48 comentarios:

  1. Unknown10 de diciembre de 2015, 18:17

    muy buen tutorial mi pregunta es la siguiente como hago para que solo se visualice en la version movil y no se muestre este menu en la version web

    ResponderEliminar
    Respuestas
    1. Ayudadeblogger26 de enero de 2016, 11:29

      Hola, para realizar este truco puede realizar los siguiente: No ingrese el código del paso 7 en su plantilla, ingrese dicho código en Diseño, abra añadir un gadget y busque el widget HTML/Javascript he ingrese todo el código del paso 7.

      Luego siga las instrucciones del siguiente tutorial para que el widget se muestre solo en teléfonos móviles y no en paginas de escritorio:

      http://www.ayudadeblogger.com/2015/10/como-activar-o-desactivar-los-widgets-de-blogger-para-que-aparezcan-en-moviles.html

      Saludos

      Eliminar
  2. Natalia Marín, meine Tapas25 de enero de 2016, 1:52

    Hola Luis,
    gracias por el post, pero yo creo que he puesto los cuatro pasos bien y no me funcional
    Tengo un java-script que ahora tampoco se ve en el móvil.
    Cómo tengo que configurar la opción de blogger para móvil? yo ahí he puesto predeterminada y nada!!!
    Si me pudieras mandar un comentario?!!

    ResponderEliminar
    Respuestas
    1. Ayudadeblogger26 de enero de 2016, 11:17

      Hola Natalia, el truco es muy simple de realizarlo, recuerde debe seguir todas las instrucciones tal como lo muestro en este tutorial, a continuación le dejo un tutorial donde indica como habilitar la plantilla móvil de su blog de Blogger: http://www.ayudadeblogger.com/2015/09/como-habilitar-la-plantilla-movil-de-mi-blog-de-blogger.html

      Ademas, si aun así no le funciona, por favor déjeme la direccion URL de su blog de Blogger y así podre observar que puede estar haciendo mal.

      Saludos.

      Eliminar
  3. Luis7 de febrero de 2016, 20:17

    Hola, tengo una pregunta, yo quiero mejorar la apariencia de los gadtes, junto con la del menú que ya tengo, sé que hay opciones css para hacer esto, sin embargo no sé cómo hacerlo, me podrías ayudar?

    ResponderEliminar
    Respuestas
    1. Ayudadeblogger11 de febrero de 2016, 0:18

      Hola, para cambiar el estilo de los gadgets a un color diferente puede seguir el siguiente tutorial:

      http://www.ayudadeblogger.com/2016/01/como-cambiar-de-color-la-barra-de-titulos-de-cualquier-widget-de-blogger.html

      Saludos

      Eliminar
  4. Ike16 de abril de 2016, 10:45

    Hola, ¿Cómo hago para que la barra se que fija arriba del todo sin dejar ningún espacio? Gracias.

    ResponderEliminar
  5. JaiperStudio24 de abril de 2016, 2:17

    Hola, muchas gracias por el tutorial; es muy bueno.

    Yo estoy modificando el css de este menu pero cuando quito los background colors y borro la linea entera de codigo para que quede transparente, queda una barra blanca de fondo, Cómo puedo eliminarla? Gracias de antemano

    ResponderEliminar
  6. Ivonne Andrietti10 de mayo de 2016, 0:12

    mi plantilla no tiene código "body" cómo soluciono esta última parte? mi web es http://www.ivonneandrietti.com

    ResponderEliminar
    Respuestas
    1. Ayudadeblogger10 de mayo de 2016, 14:13

      Hola, he actualizado este tutorial, por favor mire la nueva información que ingrese en el paso 7

      Saludos

      Eliminar
    2. Ivonne Andrietti10 de mayo de 2016, 17:05

      Gracias, sabes, seguí todos los pasos pero en el celular no me abre el menú, que será que está mal?

      Eliminar
    3. Ivonne Andrietti10 de mayo de 2016, 17:12

      Ya logré instalarlo bien, muchas gracias por este tutorial, fue muy útil, bendiciones :)

      Eliminar
    4. Ayudadeblogger12 de mayo de 2016, 19:15

      Hola Ivonne, de nada

      Saludos.

      Eliminar
  7. Astaroth19 de mayo de 2016, 2:35

    Hola Luis, primero que todo quiero agradecer por este tutorial, he buscado durante un muy largo tiempo cómo lograr un menú de la manera en la cual lo explica.

    Igualmente tengo unas cuantas inquietudes:

    1. Respecto a Style del menú:
    en la versión móvil me sale la barra del color rojo y la palabra "menú" de un tono rojo solo un poco más oscuro, la verdad se ve un tanto mal estéticamente y a la vista un tanto difícil de leer ¿cuál parte del código debería editar para cambiar ya sea el color del texto o el del botón?

    2. Los íconos miniatura que acompañan las palabras:
    Me gustaría poder cambiar los iconos que trae el menú; por esto me refiero a ej: el sobre que acompaña la palabra "contactos"

    3. Poner un "background" al menú:
    Tal como está el color sólido de color rojo en la palabra inicio, me gustaría ya sea una imágen de fondo para todo el menú o poner ese mismo tono rojo al resto del menú [de la versión web]

    Agradezco nuevamente por todo su trabajo, de verdad es de MUCHA utilidad

    ResponderEliminar
  8. Ayudadeblogger19 de mayo de 2016, 13:14

    Hola Astaroth, con respecto a su pregunta

    1.- Si no le sale el color al igual de este tutorial, es por que su plantilla tiene un color diferente y se mezclan,

    2.- Para poder cambiar los iconos deb ingresar donde dice http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

    Pero luego se debe guardar el script en un hosting y despues volverlo a insertar eliminando el script y poniendo uno nuevo

    3.- Como le dije anterior mente el codigo CSS se encuentra en el script http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

    Se debe modificar en el mismo y luego guardarlo en nuevo hosting,

    Saludos.

    ResponderEliminar
  9. Matias10 de junio de 2016, 20:13

    Buenas noches. Está muy bueno el menu. Como se podría modificar para que solo este presente en la página principal y no en la cabecera de todas las entradas? desde ya muchas gracias

    ResponderEliminar
    Respuestas
    1. Ayudadeblogger12 de junio de 2016, 18:25

      Hola Matias, con respecto a su pregunta puede seguir las instrucciones que se encuentran en el siguiente tutorial:

      http://www.ayudadeblogger.com/2013/09/como-ocultar-widgets-en-pagina-principal-entradas-de-blogger.html

      Saludos.

      Eliminar
    2. Matias15 de junio de 2016, 13:36

      Muchas gracias!! es de mucha ayuda. Ya lo pude realizar :D

      Eliminar
  10. Ayudadeblogger29 de agosto de 2016, 14:27

    Hola Daerbak, con respecto a su pregunta, si necesita ingresar el menú después de la cabecera principal, puede realizarlo de la siguiente manera:

    No ingrese el código después del < body > ,

    Busque que es la parte de la cabecera de su blog, trate de ir probando justo al final del código de la cabecera principal ingrese e código que debía ingresar después del < body >

    Ademas, sobre su otra pregunta, "¿cómo hacer que el mismo menú siga bajando al ir avanzando en la página?" En estos días publicare un tutorial, explicando como realizar este grandioso truco creado exclusivamente para Bloggers.

    Le recomiendo suscribirse, y así resabiara mis actualizaciones

    Saludos.

    ResponderEliminar
  11. Yusith Muñoz29 de septiembre de 2016, 11:16

    hola bro, proqeu no puedo agregar ninguna pagina o entrada no se ve nada se eso en cuando le doy visualizar??

    ResponderEliminar
    Respuestas
    1. Ayudadeblogger29 de septiembre de 2016, 11:30

      Hola Yusith, su pregunta es sobre el menú despegable, si así, comente un poco mas sobre lo que esta realizando, ademas de dejarme la dirección URL de su blog para poder ver lo que sucede

      Saludos.

      Eliminar
  12. Humanolitics23 de noviembre de 2016, 10:30

    Hola Luis, gracias por el tuto. ¿Cómo puedo hacer para que el menú esté alineado al centro o alineado justo en el mismo lugar que la cabecera? Gracias.

    ResponderEliminar
    Respuestas
    1. Ayudadeblogger23 de noviembre de 2016, 23:29

      Hola, gracias por escribir, con respecto a su pregunta, se tendría que ingresar el código de diferente manera y reestructurar el CSS para que se quede alineado justo a lado derecho de la cabecera principal si es lo que usted necesita. Ahora para ello, tendrá que esperar un nuevo tutorial que muy pronto se publicara.

      Saludos.

      Eliminar
  13. Juan y Lucero25 de noviembre de 2016, 17:37

    Hola Luís. estoy siguiendo los pasos pero llego al paso 6 y no hay coincidencia
    luego inenté con paso 7 y tampoco hay coincidencia. ¿qué hago? Gracias

    ResponderEliminar
    Respuestas
    1. Ayudadeblogger26 de noviembre de 2016, 10:50

      Hola Juan, gracias por escribir, sobre su pregunta, por favor cual es la dirección URL de su blog y así le podre ayudar directamente

      Saludos.

      Eliminar
  14. Juan y Lucero26 de noviembre de 2016, 11:59

    Hola Luís. Mi URL: http://dioshombremundo.blogspot.com.co
    Gracias

    ResponderEliminar
    Respuestas
    1. Ayudadeblogger26 de noviembre de 2016, 16:50

      Hola Juan, le deje las instrucciones en el siguiente enlace, no dude en escribir, dejeme saber si pudo realizar lo indicado:

      http://www.ayudadeblogger.com/p/debate-via-facebook.html

      Saludos

      Eliminar
  15. parroquiansranolaima@gmail.com26 de noviembre de 2016, 20:49

    OK gracias. Le estaré contando como me fue...

    ResponderEliminar
  16. Juan y Lucero28 de noviembre de 2016, 17:29

    Hola Luís. Creo haber solucionado mi problema. Mil gracias... http://dioshombremundo.blogspot.com.co

    ResponderEliminar
  17. Test1231237 de diciembre de 2016, 12:00

    Hola Luis, el menú esta muy bueno, de los mejores que he encontrado en internet, por ahora solo tengo un inconveniente y es que al darle al menú en móviles no despliega.

    Sabes que podría estar pasando? Este es el blog en el que hago pruebas http://jusebo.blogspot.com.co

    ResponderEliminar
    Respuestas
    1. Ayudadeblogger7 de diciembre de 2016, 17:01

      Hola Sebastian, gracias por escribir, he visitado su blog y no veo que haya insertado el código

      Saludos.

      Eliminar
  18. Roger2 de enero de 2017, 13:08

    Hola me gustó el menú, como haría para generar sub menú, algo así:
    NOTICIAS
    SUB-MENU1
    SUM-MENU1.1
    SUM-MENU1.2
    SUM-MENU2
    Gracias de antemano por su respuesta.

    ResponderEliminar
  19. Roger2 de enero de 2017, 13:11

    con respecto a la consulta anterior, estuve haciendo de esta manera pero me sale error creo porque no puede generar un sub-menú dentro de otro sub-menu... gracias

    ResponderEliminar
    Respuestas
    1. Ayudadeblogger3 de enero de 2017, 22:27

      Hola Roger, gracias por escribir, con respecto a su pregunta, para ello se debe realizar otros cambios, en estos días se publicaran tutoriales sobre su pregunta y así usted pueda solventar lo indicado, le animo a que se suscriba y así recibirá las nuevas actualizaciones de Ayudadeblogger.com

      Saludos

      Eliminar
    2. Roger9 de enero de 2017, 11:48

      GRACIAS estaré atento a cualquier publicación.

      Eliminar
  20. frceli4 de enero de 2017, 12:17

    HOLA, ME QUEDO MUY BIEN MUCHAS GRACIAS... UNA PREGUNTA SE PUEDE CAMBIAR DE COLOR DE LA BARRA?

    ResponderEliminar
    Respuestas
    1. Ayudadeblogger4 de enero de 2017, 15:59

      Hola Francisco, gracias por escribir, con respecto a su pregunta claro que es posible cambiar de color a la barra de menú, para ello tendrá que encontrar el siguiente código que se encuentra justo al principio del paso 5:

      nav {
      display: block;
      background: #E95546;
      }

      Elimine el código de color que dice E95546 y remplacelo por otro código de color de la siguiente lista de colores:

      http://www.ayudadeblogger.com/p/codigo-de-colores-para-blogs-de-blogger.html

      Saludos.

      Eliminar
    2. frceli11 de enero de 2017, 10:40

      GRACIAS !!!!!!!

      Eliminar
  21. Gabriel Miranda14 de febrero de 2017, 15:23

    Estupendo , me a quedado de maravillas , gracias .

    ResponderEliminar
  22. tonymttv21 de febrero de 2017, 17:32

    Hey amigo ayuda por favor!!!
    Hice todos los pasos pero en la plantilla responsive no me abre el menú :( me puedes explicar que puedo hacer? Porque me gusta este menú y me gustaria usarlo en un blog que tengo...
    Acá la dirección de mi blog (es uno de prueba que tengo en el que pruebo elementos antes de aplicaros en otros blogs activos que tengo)

    https://t0nysss.blogspot.com

    Ayuda por favor!!!

    ResponderEliminar
    Respuestas
    1. Ayudadeblogger22 de febrero de 2017, 1:38

      Hola Tony, he visitado su blog, pude observar que usted esta utilizando una plantilla básica de Blogger, el cual tiene algunos bloqueos en la configuración de la plantilla, es por ello que no le muestra el menú correctamente, le sugiero que cambie de plantilla a una que sea totalmente responsive

      Saludos.

      Eliminar
  23. Zerst9 de julio de 2017, 19:58

    hola amigo yo hice todo bien y perfecto pero quiero cambiar los font o iconos pero no se como hacerlo solo aparecen el de la casita y el de mensajes ah y el de etiqueta. ya encontre como cambiarles el color pero me interesa mucho saber como crear mi propio icono o cambiar estos tresque te mencione. espero leas mi comentario. te deseo un feliz dia.

    ResponderEliminar
    Respuestas
    1. Ayudadeblogger11 de julio de 2017, 11:20

      Hola Fry, sobre su pregunta, notara lo siguiente:

      fa fa-tags

      fa fa-envelope

      Lo que le indique son los iconos que se están mostrando, puede cambiar cada uno de ellos desde la siguiente tutorial de iconos Font Awesome

      http://www.ayudadeblogger.com/2016/10/iconos-font-awesome.html

      Nota: Recuerde copiar solo el codigo de icono y remplazarlo por el que se esta mostrando en el menu.

      Saludos

      Eliminar
  24. Somos Aldosivi25 de julio de 2017, 12:18

    Buenas tardes, el menú me sirvió muchísimo pero tengo un problema, no me deja abrirlo desde el móvil o celular, ¿me podríass ayudar amigo?. Saludo grande y gracias!.

    ResponderEliminar
  25. Ana amalur5 de agosto de 2020, 11:00

    Hola, muchas gracias por las miles de soluciones que planteas. He querido hacer alguna prueba de menu desplegable y responsive y antes de hacerlo definitivamente en mi blog pero desgraciadamente no me funcionan bien. Mi problema es que el menú no se abre en el móvil aunque si funciona correctamente en el ordenador. Me puedes ayudar? gracias.
    Supongo que ayudará darte la url de este blog de pruebas
    https://plantilasconredes.blogspot.com/
    Cuando me funcione lo implementaré en mi blog definitivo y desde luego habrá un buen comentario de agraddecimiento.
    Un saludo

    ResponderEliminar
  26. Ana amalur6 de agosto de 2020, 9:54

    Hola muchas gracias por tus aportaciones en este blog, quiero poner un menú desplegable y responsive en mi blog, y he intentado colocar todos y cada uno de los que planteas y me encuentro con diversos problemas que básicamente es el mismo no se ve en móviles o si se ve no se despliega. El menú que planteas en esta entrada lo he colocado en mi blog de pruebas por si pudieras echarle un vistazo. Muchas gracias, pasa un buen día.
    http://plantilasconredes.blogspot.com/

    ResponderEliminar