Problema con menú de 3 columnas en theme Orbital

Kung Seo · 31 Mar 2023

Buen día compañeros,

Actualmente estoy trabajando en un nicho muy especifico donde estoy utilizando el theme Orbital, en este mismo quiero crear un menú en 3 columnas, pero el problema es que no puedo, actualmente solo puedo en dos sin que se vea mal, si coloco 3 columnas, el texto se ve encimado, tengo la idea de que es por la caja, al no ser más grande, encima el texto del mismo, por ello busco algo de ayuda para arreglar este problema.

Este es el código que estoy utilizando:

.sub-menu {
right: auto;
left: -13.8rem;
columns: 2;
right: 0.5rem;
left: auto;
background: #fff;
border: 1px solid #bbb;
padding: 0;
position: absolute;
top: 100%;
left: -5.5em;
z-index: 1000;
}
.site-navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}

zerocool91 · 31 Mar 2023

Podrías probar así

CSS:

.sub-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

.sub-menu li {
  width: calc((100% / 3) - 1rem);
}

Me dices si te sirve de algo

Saludos

Kung Seo · 31 Mar 2023

Lo pruebo

Kung Seo · 31 Mar 2023

fmogro dijo:
Podrías probar así

CSS:

.sub-menu { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } .sub-menu li { width: calc((100% / 3) - 1rem); }

Me dices si te sirve de algo

Saludos

Los sustituyo por el que tengo? Verdad

Kung Seo · 31 Mar 2023

Al final no funcionó, alguien que tenga una idea?

moiseseccam · 31 Mar 2023

cual es la pagina?

Puko · 31 Mar 2023

Kung Seo dijo:
Actualmente estoy trabajando en un nicho muy especifico donde estoy utilizando el theme Orbital

y la pagina?

Kung Seo dijo:
quiero crear un menú en 3 columnas, pero el problema es que no puedo, actualmente solo puedo en dos sin que se vea mal, si coloco 3 columnas, el texto se ve encimado, tengo la idea de que es por la caja, al no ser más grande, encima el texto del mismo

Un menu con 3 submenu o 3 filas con submenu?
Porque no puedes?
Porque puedes 2 y 3 no?
Y el codigo html o la url?

Kung Seo · 31 Mar 2023

Puko dijo:
y la pagina?

Un menu con 3 submenu o 3 filas con submenu?
Porque no puedes?
Porque puedes 2 y 3 no?
Y el codigo html o la url?

Lincejay · 31 Mar 2023

Estuve probando porque quería hacer algo similar y encontré una solución, pero solo pude hacerlo por cada elemento individualmente:

CSS:

@media (min-width: 1041px){
   #menu-item-960 .sub-menu {
      columns: 3;
      left: auto;
         width: 600px;
   }
}

Solo tienes que inspeccionar, seleccionar el elemento del menu que quieres convertir en 3 columnas y ver cuál número aparece en tu menú en lugar de #menu-item-960 y cambiarlo.
Supongo que sabes, pero por si acaso, en width cambias el ancho del contenedor.
No sé si haya alguna forma de hacerlo para que todo el menú se convierta en 3 columnas, estuve probando y no pude XD. Puedes hacerlo individualmente por cada elemento.

No sé si se entendió, espero que si.

Kung Seo · 31 Mar 2023

Lincejay dijo:
Estuve probando porque quería hacer algo similar y encontré una solución, pero solo pude hacerlo por cada elemento individualmente:

CSS:

@media (min-width: 1041px){ #menu-item-960 .sub-menu { columns: 3; left: auto; width: 600px; } }

Solo tienes que inspeccionar, seleccionar el elemento del menu que quieres convertir en 3 columnas y ver cuál número aparece en tu menú en lugar de #menu-item-960 y cambiarlo.
Supongo que sabes, pero por si acaso, en width cambias el ancho del contenedor.
No sé si haya alguna forma de hacerlo para que todo el menú se convierta en 3 columnas, estuve probando y no pude XD. Puedes hacerlo individualmente por cada elemento.

No sé si se entendió, espero que si.

Algo así me salió con las dos columnas, pero lo intentaré y te diré que sale.

Gracias por tu ayuda

Kung Seo · 31 Mar 2023

Lincejay dijo:
Estuve probando porque quería hacer algo similar y encontré una solución, pero solo pude hacerlo por cada elemento individualmente:

CSS:

@media (min-width: 1041px){ #menu-item-960 .sub-menu { columns: 3; left: auto; width: 600px; } }

Solo tienes que inspeccionar, seleccionar el elemento del menu que quieres convertir en 3 columnas y ver cuál número aparece en tu menú en lugar de #menu-item-960 y cambiarlo.
Supongo que sabes, pero por si acaso, en width cambias el ancho del contenedor.
No sé si haya alguna forma de hacerlo para que todo el menú se convierta en 3 columnas, estuve probando y no pude XD. Puedes hacerlo individualmente por cada elemento.

No sé si se entendió, espero que si.

Utilice el código que me diste y en realidad no se bien que toque, pero creo que ya quedo solucionado, puedes ver el resultado en la web y el código te lo dejo aquí:

.primary-menu ul {
columns: 4;
left: auto;
width: 700px;
right: auto;
left: -13.8rem
rem
;
}

La diferencia es que no tienes que ir elemento por elemento, solo pegas y listo.

Lincejay · 31 Mar 2023

Si, así se convierte todo el menú en 4 columnas.
Aunque en mi caso me quedo como el anterior ya que solo necesito convertir uno XD.

Puko · 31 Mar 2023

si tienes un menu <ul> con submenus <li>...

tenias que ponerle width a los <li> y a <ul> width auto o max-width: fit-content;
o
a <ul> le pones un width fijo y con display: flex y flex-wrap: wrap para que se acomoden los <li> tambien depende de el padding y el font

Problema con menú de 3 columnas en theme Orbital

Kung Seo

zerocool91

Kung Seo

Kung Seo

Kung Seo

moiseseccam

Puko

Kung Seo

Lincejay

Kung Seo

Kung Seo

Lincejay

Puko

Temas similares