Srs. Boa noite. Pf preciso centralizar a barra de categoria. A baixo segue cod que cria o formato atual, porém não sei como faço para centralizar todos os itens na pagina.
Código
/* Cor do fundo e texto do menu*/ #cabecalho > .conteiner > .menu.superior, #cabecalho > .conteiner > .menu.superior .com-filho > a i { background-color: #ffffff; border-bottom: 1px solid #9c9b9b; } #cabecalho > .conteiner > .menu.superior .titulo { color: #c3c3c3;}
Alguém sabe como fazer para alterar a distância entre as categorias no menu superior?
Como são poucos itens, gostaria de deixá-los mais espaçados, ocupando quase todo o espaço.
/* Centralizar os itens do menu / #cabecalho > .conteiner > .menu.superior { text-align: center;} #cabecalho > .conteiner > .menu.superior .nivel-um > li { float: none; display: inline-block;}
/ Centralizar os itens do menu */
/* Ajusta margem entre as categorias*/ #cabecalho > .conteiner > .menu.superior .nivel-um > li {
float: none;
display: inline-block;
border-left: 0;
margin-right: 1px;
}
/* posiciona espaço entre as categorias (o valor 57px pode ser alterado conforme desejo do fregês)*/ #cabecalho > .conteiner > .menu.superior .nivel-um > li {
border: 0;
padding: 0px 57px;
}
Apliquei e não funcionou…
Troquei por uns que aplicava na loja, mas nada.
E ainda sumiram coisas que vinham depois no código, como tirar a barra entre as categorias no menu.
O que coloquei para alinhar antes foi: #cabecalho > .conteiner > .menu.superior .nivel-um > li {border: 0; padding: 0 14px;}
Para facilitar, vamos por partes:
Centralizar os Itens
Retiro por inteiro esse código que postei? E substituo por qual?
Espaço entre as Categorias no Menu
São 2 códigos para alterar isso?
Quero manter sem linha no meio, apenas aumentar o espaçamento entre eles.
Sabe se essa alterações se aplicam no mobile também?
Ou precisamos escrever algo no código?
Vc deve ter colado errado. Fiz aqui e deu certo.
Faz o seguinte.
Copie conforme sinalizado a baixo:
============ inicio do código ====================
/* Centralizar os itens do menu /
cabecalho > .conteiner > .menu.superior { text-align: center;}
cabecalho > .conteiner > .menu.superior .nivel-um > li { float: none; display: inline-block;}
/ Centralizar os itens do menu */
/* Ajusta margem entre as categorias*/
cabecalho > .conteiner > .menu.superior .nivel-um > li {
float: none;
display: inline-block;
border-left: 0;
margin-right: 1px;
}
/* Ajusta margem entre as categorias*/
/* posiciona espaço entre as categorias (o valor 57px pode ser alterado conforme desejo do fregês)/
cabecalho > .conteiner > .menu.superior .nivel-um > li {
border: 0;
padding: 0px 57px;
}
/ posiciona espaço entre as categorias (o valor 57px pode ser alterado conforme desejo do fregês)*/
============ fim do código ====================
Se tiver alguma instrução de alteração no cabeçalho pode ser que entre em conflito. Então sugiro que vc observe se tem algo relacionado a formatação de cabeçalho, se tiver remova.
Consegui aumentar a distância.
Porém os itens ainda ficam mais para a esquerda (mesmo alterando o valor do 57px).
Sabe porque isso acontece e como mudar?