Css úteis para alterações no megamenu de lojas que tem muitas categorias

Storefront (loja)
#1

Esses códigos css abaixo vão fazer que o megamenu ocupe toda a largura da tela do usuário e também aumenta o número de colunas. Código bem útil para lojas que tem um grande número de categroias. Seguindo o tutorial o submenu ficará similar ao da loja Amai Vinhos:

image
image1349×492 93.9 KB

Para isso basta adicionar o código abaixo no editor de conteúdo da sua loja em Layout > Inserir Código > CSS CUSTOMIZADO

.header__submenu {
  max-width: none;
  min-width: 100%;
  left: 0%;
  gap: var(--spacer-1);
  margin-top: var(--spacer-2);
  grid-template-columns: repeat(auto-fit, minmax(15%, 1fr)); 
}

Na linha grid-template-columns: repeat(auto-fit, minmax(15%, 1fr)), o 15% define a porcentagem do submenu que cada coluna vai ocupar. Sendo 15% teremos no máximo 6 colunas, colocando 20% terá 5 colunas e 25% com colunas.

4 curtidas