Menu plataforma Tray.

[Sirlene Cristina 0]

Olá, tudo bem?

 

Gostaria de aumentar o número de categorias no menu de minha loja virtual. Fiz um pequeno curso de css e algumas coisas vou alterar, mas, aumentar o número de categorias, certamente não vou conseguir.

O problema é o seguinte: por padrão, o meu tema permite somente 6 categorias. Sendo que a 6ª agrupa o restante das categorias (+categorias). Liguei para a Tray e me informaram que teria que fazer a configuração em CSS. Segue o link: https://drogariavivabem.commercesuite.com.br/loja/loja.php?loja=613103&iniSession=1

Gostaria que o menu ficasse igual a este: https://drogariavivabem-manutencao.lojaintegrada.com.br/

Alguém pode me ajudar?

 

[dougtop 31]

Bom dia Sirlene,

 

Provavelmente, existe uma programação nesse menu que entende o número máximo de itens e cria automaticamente aquele submenu de "+ Categorias". Então antes de mexer em qualquer coisa de html ou css, verifique se esse menu é um módulo da sua plataforma de e-commerce, se for, ele deve ter uma configuração para definir a quantidade de itens no menu. Se não tiver, talvez valha a pena olhar o js que criar essa categoria extra e altera-lo, para caber mais itens no menu.

 

Mas isso tudo é suposição, a gente teria que ver o css, htm e js do seu site.

 

Abraços! doug

[Maujor 144]

@Sirlene Cristina

Uma vez que você consultou a Tray e informaram que você tem que alterar as CSS conclui-se não há módulos nativos para o que você quer fazer.  
Somente com CSS você não consegue transformar os itens do submenu  + Categorias em itens do menu como você pretende. É preciso alterar a marcação HTML.
Por favor informe se você consegue alterar a marcação HTML.

[Maujor 144]

@Sirlene Cristina

Fiz algumas experiências com o menu e observei o seguinte:
Para colocar 10 links em uma barra que comporta 6 links é necessário diminuir o tamanho da fonte para 8px (muito pequena).
Alterei a marcação HTML e as CSS de modo a estender a barra por toda a largura da viewport e assim usar uma fonte de 13px.

 

O site exemplo que você indicou tem 9 links com fonte de 11px.

Não conheço os templates da TRAY e a solução que proponho será possível somente se você conseguir alterar a marcação HTML.

 

O resultado está em: http://clickmaujor.com/foruns/sirlene.html

 

Sugestão: Use a ferramenta do desenvolvedor do navegador para alterar o tamanho de fonte dos links para: 10px, 11px, 12px e observar o resultado.

 

[Sirlene Cristina 0]

Obrigada pelas dicas, Meninos.

Sinceramente, não tinha pensado em diminuir a fonte (rs).

Vou estudar e tentar fazer.

 

[Sirlene Cristina 0]

@Maujor

 

O menu deu certo. Inspecionei o elemento da página que você criou e identifiquei as alterações. Na plataforma da Tray existe uma local para edição do html (menu.html), lá inseri as alterações que me enviou e as demais fiz no css. Só alegria. Obrigada Maujor.

https://drogariavivabem.commercesuite.com.br/loja/loja.php?loja=613103&iniSession=1

 

[Sirlene Cristina 0]

Olá, tudo bem?

 

Ajustei o menu e na versão Desktop está perfeito, mas no tablet (Samsung tab E) não visualizo todos os itens.

https://drogariavivabem.commercesuite.com.br/loja/loja.php?loja=613103&iniSession=1. Inclusive, o @Maujor que me ajudou.

 

Segue o código que utilizo atualmente: 

 

.menu {max-width: 1172px; margin: 0 auto;}
.menu .nivel-um .titulo {text-align:center; font-family: "Opens Sans",sans-serif; font-size: 12px; width:117px;}

 

Tentei assim tbm:

@media (max-widht: 800px) { .menu .nivel-um .titulo {text-align:center; font-family: "Opens Sans",sans-serif; font-size: 10px; width:117px;}}

 

 

Obrigada

[Maujor 144]

@Sirlene Cristina

 

1-) O menu não está responsivo, porque você usa o Bootstrap e ele, menu, se transforma em menu mobile em viewport menor que 768px que é um breakpoint padrão do framework.

2-) O tema que você usa foi projetado para funcionar com o Bootstrap e acomodar 6 links no menu.
3-) Acresentando mais 4 links o menu cresceu em largura e causou quebra do layout.
4-) A quebra do layout está ocorrendo em viewport menor que 1170px (largura máxima que você definiu para o menu) 

 

Você pode tentar as seguintes soluções:

A-) Acresente a seguinte CSS e redimensione a largura da janela do navegador para ver o que acontece:

@media screen and (max-width:1190px) {    
  #cabecalho  .menu .nivel-um {
    height: 112px;
}
  #cabecalho .menu .nivel-um>li {    
    height: 50%;
    padding: 0 5px;
}
}

B-) Faça o menu ocupar 100% da viewport conforme eu sugeri em http://clickmaujor.com/foruns/sirlene.html

e mantenha o acréscimo das CSS indicado em A acima ajustando para uma viewport menor.