Hola @martina42,
Bienvenida al foro de soporte de WordPress.org. Te dejo el enlace a las Instrucciones de uso de los foros, ahí tienes explicada, entre otras cosas, la forma correcta de hacer una consulta. Si tienes alguna complicación con una web debes indicar la URL para poder revisarla, esta url solo es visible para los usuarios conectados.
Así estaré encantado de ayudarte
Saludos
🙂
Buenas,
La página es la siguiente; https://origencadcam.es/
En el menú me gustaría que los primeros elementos tuvieron mayor tamaño y los subelementos reducir su tamaño. Pero en las opciones de apariencia de manú en wordpress cuando modifico el tamaño se me modifican ambos a la vez. Me gustaría hacerlo de forma independiente.
De igual forma, no se si también es posible que la pestaña que se despliega del menú principal tuviera menos margen.
Muchas gracias de antemano.
Hola @martina42,
Si he entendido todo bien tendrías que añadir el siguiente código CSS:
#top-menu .sub-menu li {
padding: 0;
}
#top-menu .sub-menu {
padding: 0;
width: fit-content;
}
#top-menu .sub-menu a {
font-size: 12px;
}
Espero haberte ayudado, un saludo
Buenas @algato333
Muchísimas gracias. Ya he podido modificar el tamaño de manera independiente.
Una última duda sobre el código que me das es la siguiente:
#top-menu .sub-menu li {
padding: 0;
} /*Modificando este dato puedo cambiar la anchura de la pestaña para abrir el submenú/
#top-menu .sub-menu {
padding: 0; /*Creía que con este dato podría modificar la anchura del contenido. Es decir, que el texto estuviera cerca del borde de la pesataña, pero no hace ningún cambio/
width: fit-content;
}
#top-menu .sub-menu a {
font-size: 12px;
}
En definitiva, en la primera parte del código cambio *padding:10 y la pestaña es más ancha. Pero el contenido se queda más estrecho y querría ampliarlo para que estuviera más cerca del borde. No sé si estoy modificando mal el dato para conseguir esto.
Muchas gracias de antemano.
Hola @martina42,
¡Me alegro que te haya servido de ayuda!
🙂
En la primera parte del código estás colocando lo siguiente:
top-menu .sub-menu li {
padding: 10;
}
En CSS siempre hay que declarar la unidad a usar. Por lo que creo, querías usar píxeles, por lo que el código sería el siguiente:
top-menu .sub-menu li {
padding: 10px;
}
Ten en cuenta que al declarar el padding con un solo valor estarías diciendo que se muestre ese espacio todo alrededor. Si quieres que se muestre un valor en la vertical y otro en la horizontal (coordenadas X y Y) debes mostrar 2 valores padding: valorY valorX. A mi forma de ver quedaría mejor así:
top-menu .sub-menu li {
padding: 0 10px;
}
Espero haberte ayudado de nuevo, saludos
Buenas @algato333
La primera parte del código que me comentar si me hace las modificaciones indicando:
top-menu .sub-menu li {
padding: 10;
}
Con esto consigo que el ancho de la pestaña del submenú se amplíe. El problema me surge porque al ampliar el ancho de la pestaña el contenido que está dentro quiero que este más cerca del borde, es decir, que los márgenes de los lados sea menor. Para esto he intentado hacerlo con la segunda parte del código que me proporcionaste:
#top-menu .sub-menu {
padding: 0;
width: fit-content;
}
Pero con este no me hace modificaciones. Lo mismo es que no lo estoy usando correctamente.
Muchas gracias de antemano. Saludos.
Hola de nuevo @martina42,
No estás usando correctamente el primer código. Te repito que debes indicar la unidad, en este caso px. Lo que ocurre es que se aumenta porque, al colocarlo de forma errónea, se anula y obtiene datos de otra declaración que existe de forma nativa. Concretamente:
#top-menu li li {
padding: 0 20px;
margin: 0;
}
Puedes eliminar ese código (el de padding: 10;) que seguirá presentando el mismo ancho.
Pasando al segundo código. Si lo que quieres es estrechar aún más el ancho de la «caja» tendrás que dejar ese código como está y modificar el primer código, sí el que te he mostrado más arriba. Podrías hacer lo siguiente:
#top-menu li li {
padding: 0;
margin: 0 15px;
}
Pero insisto, recuerda que cuando escribes padding: 10; no sirve para nada ya que no estás declarando ninguna unidad.
Espero que haya sido de ayuda, Saludos
🙂
Buenas @algato333
De acuerdo, ahora si lo entendí y lo hice como me comentas y lo pude cambiar mejor. Muchas gracias.
Lo que me ocurre es que en el apartado del menú «soluciones» hay distintas opciones, por ejemplo «gestión y control de datos». Yo querría que esa solución apareciera en una sola línea en lugar de en dos. Por ello quería poner más ancho las pestaña (que lo hice con el código que me has dado), pero al ampliar el ancho de la pestaña tengo que poner el margen del contenido menor.
Para el margen lo que hice fue utilizar el código «margin-left» y «margin-right» pero aún así no se me pone en una sola línea.
Disculpa las molestias.
Muchas gracias.
Hola,
Para eso yo le quitaría el padding que tiene el anchor del submenú. Además le recortaría el alto para que fuese más estético:
#top-menu .sub-menu a {
line-height: 1.4;
padding: 0;
margin: 8px 0;
}
@martina42, creo que este debate se puede ir marcando como resuelto. Si surgen nuevas dudas puedes crear uno nuevo y estaremos encantados de ayudarte
Saludos
🙂
Genial @algato333
Muchísimas gracias por la ayuda y disculpa por tantas dudas.
Ya para dar por resuelto este debate. Me ha funcionado lo que dices, pero aunque aumente o disminuya el «margin», el otro apartado del submenú «diseño/fabricación de madera» no se coloca en una línea con el anterior 😶
#top-menu .sub-menu a {
line-height: 1.4;
padding: 0;
margin: 10px 0;
}
Muchas gracias de antemano.
Hola @martina42,
Para obligar a mantener una línea puedes usar:
white-space: nowrap;
🙂
Perfecto, Ya lo conseguí.
Mil gracias por todo 🙂
-
Esta respuesta fue modificada hace 1 año, 6 meses por
martina42.
