Un usuario preguntó 👇
Hola,
Me gusta el menú de mi versión de escritorio, pero estoy pensando en personalizar un poco el menú del móvil.
Ahora se ve así:
Quiero lograr algo como esto. Todo es muy pequeño. Búsqueda Ajax e íconos sociales más atractivos y «botón de cierre».
Cómo se ve el menú móvil ahora.
¿Es esto posible con la versión gratuita de OceanW, Elementor u otro plugin gratuito dentro de WordPress?
Cómo quiero diseñar mi menú móvil.
¡Gracias por los consejos!
Salud,
micwie
Lanzador de hilos
(@micwie)
Hace 2 años, 1 mes
Actualizar:
Solía jugar un poco con el Personalizador y ahora lo parece.
No puedo entender estas cosas:
1) Alinee los elementos del menú con el centro. 2) Agregue íconos sociales solo al menú móvil. 3) Cambie el icono del botón «cerrar menú». 4) Agregue más espacio entre los elementos del menú sin comprometer la posición y alineación del botón «cerrar menú».
(@apprimit)
Hace 2 años, 1 mes
Hola,
1. Agregue el código CSS a continuación a la sección Personalizar> Personalizar CSS.
ul#sidr-id-menu-mobile-menu {
text-align: center;
}2. Debe agregar CSS para ocultar el ícono social en el escritorio.
3. Personalice> Encabezado> Menú móvil y agregue un ícono de clase completo para reemplazar el ícono predeterminado en el campo ‘Cerrar clase de ícono de botón de menú’.
4. Personalice> Escritura> Menú móvil y ajuste la altura de la línea.
Lanzador de hilos
(@micwie)
Hace 2 años, 1 mes
1. Funcionó perfectamente. Gracias.
2. Está bien. Lo intentaré. ¿Tiene alguna sugerencia de código aquí?
3- Agregué una clase de íconos “fa-times” de Font Awesome (según su web) pero solo se ve un cuadrado en blanco. Mira la foto.
Revisé la configuración del menú y los íconos Awesome Font deberían estar activados, así que funciona.
4. Funciona para el texto, pero también desplaza el icono del botón compacto. Mira la foto.
También me gustaría resaltar ciertos artículos con texto en negrita (muebles, accesorios y todas esas categorías), pero mantengo el estilo actual para el resto. es posible?
¡Gracias!
Esta respuesta fue modificada hace 2 años, hace un mes por. Esta respuesta fue modificada hace 2 años, hace un mes por.
(@apprimit)
Hace 2 años, 1 mes
Hola,
1. ¡De nada!
2. Agregue el siguiente código CSS a la sección Personalizar> Personalizar CSS.
@media only screen and (max-width: 959px) {
.oceanwp-social-menu.clr.simple-social {
display: none;
}
}3. Porque el archivo compatible con fuentes no está actualizado. Prueba con otra clase de iconos.
4. Agregue el código CSS a continuación para configurarlo y elimine la altura de línea que agregó a través de la configuración personalizada.
#sidr li a {
line-height: 1.5 !important;
}5. Agregue el siguiente código a la sección Personalizar> Personalizar CSS.
.category-bold {
font-weight: bold;
}Ahora vaya a Panel> Apariencia> Menú> Abrir elemento de menú y agréguelo category-bold al cuadro CSS. Habilite el cuadro CSS desde la opción de pantalla (esquina superior derecha) de la página del menú.
Lanzador de hilos
(@micwie)
Hace 2 años, 1 mes
Hola de nuevo,
Gracias por tu paciencia, pero hay algunas pequeñas cosas que todavía no puedo solucionar:
2. El código CSS ni siquiera parece funcionar o hago algo mal. He habilitado el menú social dentro de Cliente / Encabezado / Menú social. Funciona perfectamente en el teléfono móvil, pero:
a) Ahora se muestra un menú social dentro del menú normal del escritorio, aunque no debería (código CSS, ¿verdad?)
b) No puedo personalizar el aspecto de los íconos sociales móviles. Cuando juegas con el volumen, no pasa nada.
3. Funciona perfectamente ahora. Gracias.
4.Funciona perfecto. Gracias de nuevo.
No funciona. Se agregó CSS dentro de la SEC personalizada y también en los elementos del MENÚ.
Ver fotos 2 y 3
¡Gracias!
(@apprimit)
Hace 2 años, 1 mes
Hola,
2. Pruebe este.
@media only screen and (min-width: 959px) {
.oceanwp-social-menu.clr.simple-social {
display: none;
}
}2b. En el panel del menú social, haga clic en el icono de móvil en la parte inferior del panel. Después de eso, podrás darle estilo.
5. Reemplace el código anterior con el código CSS a continuación con la sección Personalizar> Personalizar CSS.
.category-bold a {
font-weight: 600 !important;
}Ahora agregue category-bold en el campo de la clase CSS, un elemento de menú como mencioné en mi respuesta anterior.
Lanzador de hilos
(@micwie)
Hace 2 años, 1 mes
Hola. Desafortunadamente, ambos códigos no parecen funcionar: / Se han agregado, pero nada ha cambiado. Puede comprobarlo usted mismo yendo a la página. http://www.paulthevintage.com
(@apprimit)
Hace 2 años, 1 mes
No, no he visto el código en el código fuente. Deberia de funcionar. En cuanto al ícono social, no he visto ningún ícono social en su sitio. ¿Lo habilitaste?
Lanzador de hilos
(@micwie)
Hace 2 años, 1 mes
Hola. Enviarle las capturas de pantalla desde la interfaz. La captura de pantalla CSS muestra que se ha agregado el código, la siguiente muestra que la versión de escritorio muestra íconos sociales (no deberían) y la última muestra que el texto en negrita no funciona dentro del menú móvil.
(@apprimit)
Hace 2 años, 1 mes
La conexión conectada no funciona. ¿Puedes reenviar la imagen? Use esto para los íconos sociales.
@media only screen and (min-width: 959px) {
.oceanwp-social-menu.clr.social-with-style {
display: none;
}
}Para hacer que el enlace de texto del menú esté en negrita, agregue el siguiente código a la sección Personalizar> Personalizar CSS
.sidr-class-category-bold a {
font-weight: 600 !important;
}Lanzador de hilos
(@micwie)
Hace 2 años, 1 mes
Enlace trabajo shuold. He hecho una conexión directa. Ahora debería funcionar.
Ambos códigos CSS funcionan perfectamente ahora. ¡Gracias de nuevo por tu paciencia!
micwie
(@apprimit)
Hace 2 años, 1 mes
¡De nada!
¿Solucionó tu problema??
0 / 0