Centralizar Barra de Menu

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;}

/* Centralizar os itens do menu*/
#cabecalho > .conteiner > .menu.superior {text-align: center; float: none; border-right: 1px; solid: #9c9b9b; border-left: -3px; margin-right: -3px;}

/* Centraliza todo o menu de categoria*/
.menu ul {
margin: 0;
}

/Remove icone indicador de subcategoria/
.icon-chevron-down:before {
content:none;
}
[class^=“icon-”]:before, [class*=" icon-"]:before {
text-decoration: inherit;
speak: none;
}
.menu li.com-filho>a i {
display: none;}

Obrigado pela ajuda.

/ * Cor do Fundo e texto do menu de * /
#cabecalho > .conteiner > .menu .superior , #cabecalho > .conteiner > .menu .superior .com-filho > ai { background-color : #4777B3 ; }
#cabecalho > .conteiner > .menu .superior .titulo { color : #FFFFFF ; }

/ * Centralizar itens OS fazer MENU * /
#cabecalho > .conteiner > .menu .superior { text-align : center ; }
#cabecalho > .conteiner > .menu .superior .nivel-um > li { float : none ; display : inline-block ; border-left : 0 ; margin-right : -3px ; }

a cor e so mudar para a que quiser pondo o codigo que encontra no site http://www.colorpicker.com/

Boa tarde,

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.

Obrigado.

Qual endereço da sua loja?


Como são apenas 4 itens, gostaria de uma distância maior entre eles.

Cole estas linha no CSS

/* 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;
}

Qualquer coisa me avise.

2 Curtidas

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?

Obrigado.

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?

Obrigado.

Olá! Gostaria de centralizar o meu menus tbm, eu tentei uzar o cod acima e não deu certo

Minha loja é www.viruswear.com.br

Grato

olá Samuel, tudo bem?
Poderia me ajudar??
Como você fez para expandir o menu superior?
Obrigada

Eu quero centralizar os nomes que ficam na vitrini LANÇAMENTOS e etc… alguem me ajuda

Olá!!

Eu usei esse código:

#cabecalho > .conteiner > .menu.superior { text-align: center; }
#cabecalho > .conteiner > .menu.superior .nivel-um > li { float: none; display: inline-block; border-left: 0; margin-right: -3px; }

3 Curtidas

Antes de cabeçalho, use #

3 Curtidas

Obrigada! Me salvou!