Ir para conteúdo
Sirlene Cristina

Menu plataforma Tray.

Recommended Posts

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?

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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.
 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora


  • Conteúdo Similar

    • Por DinhoPHP
      Olá! Preciso urgentemente de ajuda, para desenvolver um estilo de busca avançada, como a do Zap Imóveis (no modo mobile). É possível fazer no CSS puro ou há FrameWorks? Fico no aguardo!
       
      Não consegui enviar a imagem por erro no site deste fórum.
    • Por Thiago Franchin
      Menu lateral retrátil apenas com CSS.
      Aprenda nessa vídeo aula a fazer um menu lateral retrátil usando apenas CSS, sem usar nenhum script ou plugin.
      Dicas no vídeo de como usar ícones do Font Awesome.
      Download dos arquivos: https://github.com/thiagofranchin/menuLateralCss
       
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

Este projeto é mantido e patrocinado pelas empresas:
Hospedado por: