Submenu Mobile com submenuAccordion

[Everson-Hugo]

No meu menu de categrias mobile preciso adcionar subcategorias, estou usando o submenu.accordion para mostrar ou ocultar os submenus ou mais opções quando o usuário clica em um título ou seta. Esta funcionando muito bem isso, o problema está na “Stylização”, gostaria de exibir os subsmenus em colunas, mas não estou conseguindo mesmo usando a “props” de “orientation”: “vertical”.

Abaixo está o código que estou usando;

“link#informatica-tecnologia”: {
“children”: [“rich-text#informatica-tecnologia”],

    "props": {
        "href": "/informatica-e-tecnologia"
    }
},

"rich-text#informatica-tecnologia": {
    "props": {
        "text": "Informática e Tecnologia"
    }
},

"menu-item#informatica-tecnologia": {
    "props": {
      "id": "menu-item-informatica-tecnologia",
      "type": "custom",
      "iconId": null,
      "highlight": true,
      "blockClass": "subcategory",
      "itemProps": {
        "categoryId": 8,
        "type": "internal",
        "href": "/informatica-tecnologia",
        "noFollow": true,
        "tagTitle": "Informática e Tecnologia",
        "text": "Informática e Tecnologia"
      }
    },
    "blocks": ["submenu.accordion#informatica-tecnologia"]
  },

  "submenu.accordion#informatica-tecnologia": {
    "children": [
      "menu-item#computadores",
      "menu-item#notebook",
      "menu-item#smartwatch",
      "menu-item#tablet"
    ],
    "props": {
        "orientation": "vertical",
        "blockClass": "list-subcategory-dropdown-column"
    }
  },

  "menu-item#computadores": {
    "props": {
      "id": "menu-item-computadores",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "blockClass": "subcategory-dropdown",
      "itemProps": {
        "categoryId": 9,
        "type": "internal",
        "href": "/computadores",
        "noFollow": true,
        "tagTitle": "Computadores",
        "text": "Computadores"
      }
    },
    "blocks": []
  },

  "menu-item#notebook": {
    "props": {
      "id": "menu-item-notebook",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "blockClass": "subcategory-dropdown",
      "itemProps": {
        "categoryId": 10,
        "type": "internal",
        "href": "/notebook",
        "noFollow": true,
        "tagTitle": "Notebook",
        "text": "Notebook"
      }
    },
    "blocks": []
  },

  "menu-item#smartwatch": {
    "props": {
      "id": "menu-item-smartwatch",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "blockClass": "subcategory-dropdown",
      "itemProps": {
        "categoryId": 11,
        "type": "internal",
        "href": "/smartwatch",
        "noFollow": true,
        "tagTitle": "Smartwatch",
        "text": "Smartwatch"
      }
    },
    "blocks": []
  },

  "menu-item#tablet": {
    "props": {
      "id": "menu-item-tablet",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "blockClass": "subcategory-dropdown",
      "itemProps": {
        "categoryId": 12,
        "type": "internal",
        "href": "/tablet",
        "noFollow": true,
        "tagTitle": "Tablet",
        "text": "Tablet"
      }
    },
    "blocks": []
  },

Queria que as subcategorias fossem exibidas dessa maneira;

[estevao_santos]

@Everson-Hugo tudo certo?

Você tentou aplicar esse estilo no arquivo CSS?

.list-subcategory-dropdown-column {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Espaçamento entre colunas */
}

.subcategory-dropdown {
    flex: 1 1 50%; /* Define que cada item ocupa 50% da largura */
    min-width: 150px; /* Largura mínima para cada item, ajustável conforme o design */
}

Veja se funciona.

Se der certo, marque como solução para apoiar outros da comunidade.

Abs,
Estevão.

[Everson-Hugo]

@estevao_santos Bem e com você?

Cara, muito obrigado pela resposta, sim eu já tinha estilo estava igual o que você me passou;

.styledLinkContent–subcategory{
color: #004439;
font-weight: 600;
font-size: 16px;
margin-bottom: 8px;
}

.styledLinkContent–subcategory-dropdown{
flex: 1 1 50%;
min-width: 150px;
color: #3fa110;
font-size: 16px;
margin-bottom: 8px;
}

.styledLinkContent–list-subcategory-dropdown {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 10px;
width: fit-content;
}

Mesmo assim não funcionou. Olhando o meu console eu consegui fazer eles ficarem em coluna Modificando esse stylo .flex, mas não sei onde ele se encontr ano projeto,

[estevao_santos]

Opa @Everson-Hugo por nada.

Entendi.

Você chegou a usar o !important?

1. Verifique a especificidade do CSS: Certifique-se de que o seletor que você está utilizando tem uma especificidade suficiente para sobrepor qualquer outro estilo que possa estar aplicado no submenu. Isso pode ser feito adicionando mais camadas de seletor ou usando !important como último recurso.
2. Altere o estilo flex no seu CSS: Certifique-se de que o contêiner que envolve as subcategorias tenha o comportamento flex com flex-wrap e direção adequados. Você mencionou que quer subcategorias em colunas, então ajuste a exibição para garantir que ele distribua os itens de forma correta em linhas.

Tente alterar suas classes CSS da seguinte maneira:

.styledLinkContent--list-subcategory-dropdown {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    width: 100%; /* ou ajuste para a largura desejada */
}

.styledLinkContent--subcategory-dropdown {
    flex: 1 1 45%; /* Ajuste a porcentagem para controlar o número de colunas */
    min-width: 150px;
    color: #3fa110;
    font-size: 16px;
    margin-bottom: 8px;
}

Certifique-se de que não há erros de nomenclatura nos seus estilos. Um problema comum pode ser um caractere incorreto, como em -- vs – (hífen duplo ou traço), o que pode estar atrapalhando a aplicação dos estilos. Como vi no código anterior, parece haver uma diferença sutil.

3. Confirme a aplicação no DevTools: No print que você enviou, parece que o estilo .flex está sendo aplicado diretamente na página. Se você conseguiu alterar o layout ao inspecionar no console, tente copiar aquele estilo específico que funcionou e adicione ao seu arquivo de estilo, garantindo que ele esteja sendo carregado na hora correta.

Se ainda não encontrar onde esse estilo flex está sendo aplicado, tente verificar o arquivo de estilo principal ou até mesmo em outras classes que possam estar sendo aplicadas dinamicamente.

Espero que estas informações ajude de alguma forma.

Abs,
Estevão.

[Everson-Hugo]

@estevao_santos

ap: wrap;

@estevao_santos muito obrigado pelas dicas, consegui resolver, criei uma classe para o submenu.accordion e coloquei important na frente; ficou assim;

.styledLinkContent–subcategory{
color: #004439;
font-weight: 600;
font-size: 16px;
margin-bottom: 8px;
}

.submenuAccordion–list-subcategory-dropdown{
display: flex!important;
flex-direction: column!important;
}

.styledLinkContent–subcategory-dropdown {
color: #3fa110;
font-size: 16px;
margin-bottom: 10px;
}

.styledLinkContent–list-subcategory-dropdown {
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px;
width: max-content!important;
}

[estevao_santos]

@Everson-Hugo Show de bola!

Que bom que deu certo!!

Então, provavelmente era o !important faltando para poder sobrescrever o estilo que vem direto da VTEX.

Se foi a dica que passei, marque depois como solução na resposta acima para poder apoiar outros da comunidade.

Abs,
Estevão.