Como alterar a altura ou tamanho do menu superior?

[Sheila81]

Oi Ivan, obrigada :). Eu coloco no CSS ou Html?

[Ivanilson_Gomes]

No CSS

Fique tranquila! qualquer coisa, estamos aqui!

[Sheila81]

Oi Ivan, deu certo, nossa ficou muito bom, show de bola :). Obrigada mesmo.

Conforme eu for aumentando ou tirando categorias do menu, ele se mantem na mesma configuraçao? Na mesma linha mesmo se eu precisar aumentar ou diminuir categoria por exemplo?

Outra pergunta, o visual da loja na versao web eu gosto mais, tem como a versao mobile ter a mesma aparencia da versao web?

obrigada

[Ivanilson_Gomes]

Que bom que gostou!

@Sheila81, é como eu lhe disse… Se for pra aumentar as categorias, não tem como manter eles na mesma linha sem reduzir alguma coisa (espaçamento, texto, etc.). Então, não… você sempre terá que reajustar alguma coisa.

O que você não gosta da versão mobile?!

[Sheila81]

Eu queria que a versão mobile a aparência dela fosse igual da versão web. Referente a aparência.

[Ivanilson_Gomes]

Pra que o post não vire um chat, vou falar com você via mensagem direta pra que você me dê detalhes do que está pensando.

Mas acho que dependendo do que você tenha em mente, você teria que contratar um profissional para fazer todas as alterações necessárias.

[Sheila81]

Oi Ivan. Seria a forma como a gente vê no PC visse igual no mobile. Se isso é possível? Vi que na mobile mostra um produto em baixo do outro e no PC mostra diferente um do lado do outro. Menu etc tbm muda. Queria que mostrasse igual o PC. Vejo esta diferença no celular. No tablet eu vejo mais parecido que o PC. O que queria mudar e a visão no celular.

[Camila_Farias]

Oi, Pedro! Tudo bem?
Como faço para trazer esse menu mais para esquerda? E não que comece na linha debaixo.

[Pedro]

Para centralizar os itens do menu eu uso o código abaixo. Testa na sua loja e vê se funciona, se não funcionar é só tirar que volta ao normal.

Insere esse código em Incluir HTML >> Descrição: Centralizar Menu >> Local Publicação: Rodapé >> Pagina da Publicação: Todas as páginas >> Tipo: CSS.

/* Centralizar os itens do menu */
#cabecalho > .conteiner > .menu.superior { text-align: center; font-family: 'Roboto', serif; }
#cabecalho > .conteiner > .menu.superior .nivel-um > li { float: none; display: inline-block; border-left: 0; margin-right: -3px; }

[Camila_Farias]

Oi, Ivan! Tudo bem?
Coloquei o código no meu site e não deu certo :’( tem outra alternativa?

[Leonardo_Nazareth]

Alguém pode me ajudar???
Preciso dos códigos para edição dos cabeçalhos, como o site abaixo.
Por favor…

Enviando…

Milano Theme

[Ivanilson_Gomes]

Oi, @Camila_Farias.
Não reparei que você tinha falado comigo… mil perdões! Já resolveu seu problema?

[Leonardo_Nazareth]

@Ivanilson_Gomes
Pode me ajudar?

[Ivanilson_Gomes]

Olá @Leonardo_Nazareth, tudo bom?!
Olha… a edição completa do cabeçalho demanda muitas alterações. Você querer algo desse tipo, tudo pronto só para implementar sem gastar absolutamente nada… é meio difícil. Eu mesmo não tenho códigos prontos de blocos inteiros como esse. Até porque não é garantido que vá funcionar plenamente em todos os casos. As vezes mais atrapalha do que ajuda.
A minha sugestão é que se você tem pressa ou acha que não tem tempo para aprender, contrate um profissional para fazer esse trabalho pra você. Mas se você dispõe de disponibilidade, vale muito a pena estudar um pouco de CSS para poder alterar coisas básicas e pedir ajuda aqui na comunidade em coisas mais pontuais ou complexas pra você.





Atenciosamente: Ivan Gomes
Design Gráfico | E-Commerce | Social Media
Solicite seu orçamento Telegram: (85) 9 8759-9852

[Leonardo_Nazareth]

Preciso colocar um contorno/borda arredondada em volta do campo de busca.
Alguém poderia me ajudar?

[Camila_Farias]

Oi, Ivan!
Imagina!
Não consegui ainda está assim atualmente

[Ivanilson_Gomes]

Você quer o seu menu do lado esquerdo… é isso?!
Estou no aguardo! (Prometo que não vou passar mais 7 dias pra responder!)

[Camila_Farias]

Imagina!
Então eu queria que ele começasse da esquerda, sabe? Do comecinho do banner

[DantasPresentes]

@Pedro

/* Cabeçalho */
@media only screen and (max-width: 1140px){
#cabecalho .conteudo-topo .inferior .span8 {
width: 60% !important;
}
}

@media only screen and (max-width: 767px){
#cabecalho .conteudo-topo .inferior .span8 {
width: initial !important;
}
}

@media only screen and (max-width: 979px){
#cabecalho .acoes-conta > li > i {
display: block;
width: auto
}

#cabecalho .conteiner .superior .span4 {
width: 149px !important;
}

#cabecalho .conteiner .superior .span4 a {
position: absolute;
right: 15px;
top: 16px
}
}

@media only screen and (max-width: 900px){
#cabecalho .menu.superior > .nivel-um > li {
padding: 0 10px !important;
}
}

@media only screen and (max-width: 950px){
#cabecalho .conteudo-topo .inferior .span8 {
width: 50% !important;
}
}

@media only screen and (max-width: 794px){
#cabecalho .menu.superior > .nivel-um > li > a > strong {
font-size: 9pt !important;
}
}

@media only screen and (min-width: 768px){
#cabecalho .conteiner .menu.superior > ul.nivel-um > li:hover strong,#cabecalho .conteiner .acoes-conta i,#cabecalho .conteiner .acoes-conta a,#cabecalho .carrinho strong.qtd-carrinho,#cabecalho .conteiner .busca button{
color:#666!important;
}

.barra-inicial {
position:absolute;
top:0;
left:0;
width:100%;
background:rgba(0,0,0,.1)!important;
z-index:9
}

.barra-inicial .conteiner .lista-redes {
width:auto;
float:right
}

.barra-inicial .conteiner .lista-redes li {
border:none;
margin-left:5px
}

.barra-inicial .conteiner .lista-redes li i {
font-size:15pt;
background:none;
color:#fff
}

.barra-inicial .conteiner .canais-contato {
float:left;
width:auto;
margin:0
}

.barra-inicial .conteiner .canais-contato>ul>li {
border:none
}

.barra-inicial .conteiner .canais-contato li a {
color:#fff
}

.barra-inicial .conteiner .canais-contato li span {
color:#fff
}

#cabecalho {
position:relative;
}

#cabecalho .conteiner {
padding-top:30px;
box-shadow:none;
background:none;
padding-bottom:50px
}

#cabecalho .conteiner > .row-fluid {
position:relative
}

#cabecalho .conteiner .conteudo-topo {
position:absolute;
right:0;
top:50%;
margin-top:-38px
}

#cabecalho .conteiner .conteudo-topo .superior.row-fluid {
padding:0 0 3px
}

#cabecalho .conteiner .bem-vindo {
text-transform:uppercase;
font-size:8pt!important;
color:#fff;
font-weight:700
}

#cabecalho .conteiner .bem-vindo span {
color:rgba(0,0,0,.6);
font-weight:700
}

#cabecalho .conteiner .acoes-conta > li:first-child {
display:none
}

#cabecalho .conteiner .superior .span4 {
width:auto;
position:absolute;
bottom:0;
right:110px;
margin:0;
padding-right:12px;
border-radius:6px;
background:#fff
}

#cabecalho .conteiner .acoes-conta > li {
display:inline-block;
vertical-align:middle
}

#cabecalho .conteiner .acoes-conta a {
text-transform:uppercase;
color:#fff;
position:relative;
bottom:4px
}

#cabecalho .conteiner .acoes-conta i {
padding:0;
width:50px;
height:auto;
line-height:50px;
font-size:19pt;
margin:0;
background:none;
color:#fff
}

#cabecalho .conteiner .span8.busca-mobile {
margin:0
}

#cabecalho .conteiner .busca {
padding:0;
border:none;
background:none
}

#cabecalho .conteiner .busca input {
width:100%;
padding:0;
height:50px;
box-shadow:none;
border:none;
border-radius:6px;
text-indent:15px
}

#cabecalho .conteiner .busca button {
position:absolute;
border:none;
top:0;
right:0;
height:100%;
border-radius:0 50px 50px 0;
padding:0 15px;
font-size:17pt;
background:none;
}

#cabecalho .span4.hidden-phone {
position:absolute;
margin:0;
right:0;
width:auto;
bottom:0
}

#cabecalho .carrinho {
border-left:1px solid rgba(0,0,0,.12);
padding-left:12px;
border-top:none;
border-right:none;
border-bottom:none
}

#cabecalho .carrinho i.fundo-principal {
font-size:30pt;
background:none;
margin-right:25px;
padding:0;
width:50px;
line-height:50px;
height:auto;
opacity:1
}

#cabecalho .carrinho strong.qtd-carrinho {
position:absolute;
display:block!important;
margin:0;
right:0;
width:20px;
line-height:20px;
font-size:12pt;
top:calc(50% - 10px);
text-align:center;
background:#fff;
border-radius:100%
}

#cabecalho .carrinho > a > span {
display:none
}

#barraTopo .carrinho-interno,#cabecalho .carrinho-interno {
position:absolute;
top:100%
}

#cabecalho .conteiner .menu.superior {
position:absolute;
bottom:-1px;
left:0;
width:100%;
background:#fff;
border-bottom:1px solid rgba(0,0,0,.2)
}

#cabecalho .conteiner .menu.superior > ul.nivel-um {
text-align:center;
max-width:1140px;
padding:0 20px;
margin:0 auto
}

#cabecalho .conteiner .menu.superior ul.nivel-um>li {
float:initial;
border:none;
display:inline-block;
margin-top:initial
}

#cabecalho .conteiner .menu.superior ul.nivel-um li strong {
color:#444;
font-size:10pt;
text-transform:uppercase
}

#cabecalho .conteiner .menu.superior ul.nivel-um ul.nivel-dois {
position:absolute;
top:100%
}
}

@Pedro como faço para deixar meu menu centralizado e com a cor da fonte branca. O link “Identifique-se” também ficou muito escuro, como faço para deixar ele vermelho?

[DantasPresentes]

Ivanilson me ajuda, preciso do código para mudar a cor da fonte do menu, deixar as subcategorias alinhada a esquerda e mudar a cor do “Identifique-se”.

Dantas Presentes