Un usuario preguntó 👇
Hola expertos
Necesito ayuda para reducir la altura de la barra de navegación de mi menú, tiene espacio adicional que no se ve bien. me puedes ayudar, por favor ??
Gracias
(@bcworkz)
Hace 1 año, 11 meses
Debe rellenar ajustando diferentes dimensiones para encoger o hacer crecer todo. Título del sitio, selectores .els-header .els-logo. Los elementos del menú en sí, selectores .els-main-menu li. Y el área de iconos, selector .els-icon. Agregue estas reglas de violación de SEC en el panel SEC Extra del adaptador.
Element Inspector utiliza las herramientas de desarrollo de su navegador para probar diferentes valores de relleno para encontrar la altura y la ubicación correctas en el interior.
(@vallujain)
Hace 1 año, 11 meses
Hola BCworkz,
gracias por su respuesta, soy nuevo en esto, ¿pueden copiar y pegar el código en mi sección CSS personalizada?
(@vallujain)
Hace 1 año, 11 meses
Hola de nuevo,
Escribí el código a continuación, pero el espacio no se redujo ……
.els-menú-principal li {pad-top: 5px; fondo acolchado: 5px; } .els-icon {pad-top: 5px; fondo acolchado: 5px; } .els-header {pad-top: 0px; fondo acolchado: 0px; } .els-logo {pad-top: 0px; fondo acolchado: 0px; }
¿Me puede decir cómo reducir el margen?
Gracias
(@vallujain)
Hace 1 año, 11 meses
Hola de nuevo,
Probé un nuevo código a continuación y pude cambiar la altura simplemente quitando la insignia, ¿pueden ayudarme a solucionarlo?
.els-main-menu li {altura: 20px; parte superior acolchada: 5px; fondo acolchado: 5px; } .els-icon {altura: 20px; parte superior acolchada: 5px; fondo acolchado: 5px; } .els-header {altura: 20px; } .els-logo {altura: 20px; }
(@bcworkz)
Hace 1 año, 11 meses
Parece que has aprendido un poco de CSS 🙂 A pesar de una completa falta de éxito, hasta ahora te ha ido bien.
Trabajando desde la SEC que publicó más recientemente, cambie cada altura a 40 px para acomodar la altura del logotipo, a menos que tenga la intención de desbordarlo en el área de abajo.
Con un logotipo .els, agregue reglas de relleno y una parte superior de relleno estableciendo la distancia a 0 (sin unidad de medida como px requerido para 0). Lo más importante es agregar esta regla a .els-logo: margin-top: -5px;. Esta regla gestiona mejor la posición vertical del logotipo. Podemos tener márgenes negativos pero sin relleno negativo.
Por supuesto, cambie los valores de distancia como mejor le parezca. Si hay algún otro contenido adicional en CSS adicional, agregue su CSS al final. Si aún tiene dificultades para aplicar una regla, puede probar el !important modificador al final de la regla. Por ejemplo:
height: 40px !important;
Este modificador se considera una mala práctica y debe evitarse su uso, pero puede ser útil cuando tiene problemas para romper una regla existente cuya fuente no debe modificarse.
Utilice la herramienta de desarrollo de su navegador en el modo de emulador móvil para asegurarse de que el encabezado sigue siendo correcto en los dispositivos móviles. Es posible que deba agregar diferentes reglas a los teléfonos celulares. Para aplicar reglas solo en pantallas pequeñas, usamos preguntas de los medios. Se ven así:
@media (min-width: 767px) {
/* small screen rules go here */
}No es raro que algunos de estos estén disponibles para diferentes tamaños de pantalla, pero el objetivo es ser lo más pequeño posible. Intente usar especificaciones de ancho que su tema ya usa en responsive.css. También se pueden hacer preguntas sobre medios personalizados en el panel CSS Extra.
(@vallujain)
Hace 1 año, 10 meses
impresionante: – como se indica a continuación, el código funcionó perfectamente en la pantalla grande, pero la pantalla del móvil está confusa. .els-main-menu li {
acolchado superior: 15px; fondo acolchado: 5px;
} .els-icon {altura: 80px! importante; parte superior acolchada: 15px; fondo acolchado: 5px; } .els-header {altura: 90px! importante; parte superior acolchada: 0; fondo acolchado: 0; } .els-logo {altura: 80px! importante; borde superior: -15px; parte superior acolchada: 0; fondo acolchado: 5px; }
¿Pueden ayudarnos en la pantalla pequeña? ¿Qué se debe escribir en @media (ancho mínimo: 767px) {
}
(@bcworkz)
Hace 1 año, 10 meses
¿Quizás algo? 🙂 Depende de lo que quieras lograr. Tengo algunas ideas para posibles mejoras, pero no es mi sitio. Describe en detalle lo que quieres lograr. También tenga en cuenta que es posible que necesite una resolución para una pantalla de 350 px que sea diferente a la resolución para una pantalla de 767 px. El icono del menú debe ir a algún lugar sin hacinamiento.
(@vallujain)
Hace 1 año, 10 meses
Hola Experto,
Gracias por su respuesta, en realidad, después de agregar código CSS adicional, mi sitio parece un escritorio, pero cuando abro el mismo en el dispositivo móvil, solo aparece la mitad de la bandera y el encabezado se superpone en el bandera.
(@bcworkz)
Hace 1 año, 10 meses
Ahora veo la superposición de lo que hablas. No apareció en el emulador que estaba usando, pero está en mi teléfono. Puede mover la bandera hacia abajo con una regla como esta:
.home .vc_row.wpb_row {
margin-top: 50px;
}Como de costumbre, ajuste el número como desee. Esto puede afectar a otros elementos de la página. Si es así, la mejor solución es agregar otra identidad o atributo de clase a este elemento que sea exclusivo de la bandera. Utilice el atributo extra como selector de CSS.
Esto escalará las imágenes del banner para que se ajusten al ancho disponible:
.els-prslr .els-prslr-img img {
height: auto;
width: 100%;
}(@vallujain)
Hace 1 año, 10 meses
Hola experto
gracias por su guía … si tiene el código actualizado como se muestra a continuación, todo está bien después de esto, pero todavía hay una pregunta … en cada página que no sea la de inicio, la barra de título se superpone con mi encabezado y se ve frustrante … ¿pueden ayudarme si esto es tan bueno
.els-prslr .els-prslr-img img {altura: automática; ancho: 100%; } .els-main-menu li {
acolchado superior: 15px; fondo acolchado: 5px;
} .els-icon {altura: 80px! importante; parte superior acolchada: 15px; fondo acolchado: 5px; } .els-header {altura: 90px! importante; parte superior acolchada: 0; fondo acolchado: 0; } .els-logo {altura: 80px! importante; borde superior: -15px; parte superior acolchada: 0; fondo acolchado: 5px; } .els-main-menu li {
acolchado superior: 15px; fondo acolchado: 5px;
} .els-icon {altura: 80px! importante; acolchado superior: 15px; fondo acolchado: 5px; } .els-header {altura: 90px! importante; parte superior acolchada: 0; fondo acolchado: 0; } .els-logo {altura: 80px! importante; borde superior: -15px; parte superior acolchada: 0; fondo acolchado: 5px; } @Media solo pantalla y (ancho máximo: 600px) {.home .vc_row.wpb_row {margin-top: 70px; }} @media solo pantalla y (ancho máximo: 768px) {.home .vc_row.wpb_row {margin-top: 70px; }}
(@bcworkz)
Hace 1 año, 10 meses
Esto ejercerá presión sobre el contenido de la página superpuesta:
.els-titlebar-title.col-lg-5 {
margin-top: 50px;
}Como de costumbre, ajuste el número como desee. Debo admitir que esta es una solución débil. Siempre que los elementos anteriores sigan siendo los mismos, estará bien. Algo en el encabezado no ocupa el espacio que debería, lo que hace que otros elementos sean demasiado altos. La mejor solución sería corregir esto, pero no tengo idea de cuál es el motivo. Confío en un emulador para determinar CSS, que suele ser muy preciso. Cuando no, no estoy seguro de qué hacer, pero ofrezco soluciones débiles.
(@vallujain)
Hace 1 año, 10 meses
muchas gracias por su trabajo al final 🙂
¿Solucionó tu problema??
0 / 0