Inserir a palavra MENU no acesso mobile


#1

Comprei o layout pronto da minha loja e notei que as pessoas tem dificuldade de encontrar o menu na versão para celular, gostaria de incluir a palavra MENU no campo direito, ao lado do campo de busca, alguém poderia me ajudar?


#2

Eu consegui resolver com esse código, mas eu fiz alguns ajustes específicos para minha loja, retirei o texto do cabeçalho, mudei o texto do menu, alguns tamanhos e cores. Veja se ele da certo pra você e faças as alterações que desejar.


#3

Muito obrigada, mas onde coloco isso? :sweat:


#4

Vá na engrenagem que fica no canto superior direito do painel na loja integrada, depois clique em Editar CSS, copie e cole o código na área de edição e depois clique em salvar.


#5

colei, até mostrou porém o texto menu fica cortado, acho que o espaço é pequeno…


#6

Deixa as alterações salvas e me manda o link do seu site para eu ver se posso te ajudar.


#7

eu salvei, mas agora tá aparecendo um bichinho azul que não aparecia antes de entrar no produto :scream:
a loja é https://www.paperkids.com.br/


#8

Aqui ta normal a versão mobile.
Cola esses ajustes abaixo dos códigos que você colocou por último:

@media (max-width: 768px){
.conteudo-topo .busca-mobile .atalho-menu {
width: 100px;
}
.busca {
margin: 0 100px 0 0;
}
}


#9

Com os ajustes aqui está assim:
aqui


#10

Ain, colei abaixo mas no meu celular ainda fica cortado


#11

Ver se você colou direitinho, você precisar adicionar esse último código que te enviei no final, depois daqueles códigos iniciais.
Se não der tenta esse:

@media (max-width: 768px)
.conteudo-topo .busca-mobile .atalho-menu {
width: 100px;
}
.busca {
margin: 0 100px 0 0;
}


#12

Tentei com os dois últimos códigos abaixo do primeiro e nada, testei em 2 celulares (iphone) mas continua com o espaço entre a busca e o menu…
Pedro, agradeço muito sua atenção.


#13

Tenta esse:

@media only screen and (max-width: 767px){
.conteudo-topo .busca-mobile .atalho-menu {
width: 80px;
}
}

Se não der certo, me manda um print da área dos códigos que você inseriu.


#14


#15

Você copiou errado, era para entrar no link que eu te mandei na primeira resposta e copiar o código todo. Você só copiou o resumo que mostra na citação.


#16

Vamos tentar fazer por aqui. Apaga tudo que eu já pedi para você inserir lá e cola esse código aqui pra gente depois fazer os ajustes.

@media(max-width: 767px){
.conteudo-topo .busca-mobile .atalho-menu::before {
content: ‘Menu’;
font-weight: bold;
font-family: ‘Raleway’ ,sans-serif;
}
.busca {
margin: 0 80px 0 0;
}
.busca input {
box-sizing:border-box;
}
#cabecalho {
padding-top: 0;
}
#cabecalho .menu.superior .nivel-um>li {
padding: 0;
width: 100%;
}
}


#17

me desculpa, não percebi que era para clicar. apaguei até a linha 6 e colei o novo código, agora não aparece nem o nome e continua o espaço… se quiser mando novo print


#18

Certo então vamos fazer assim, vou te passar o código completo e depois a gente vai fazendo alguns ajustes para ver como fica. Apaga tudo que você tinha colocado.

@media(max-width: 767px){
.conteudo-topo .busca-mobile .atalho-menu::before {
content: ‘Menu’;
font-weight:bold;
font-family: ‘Raleway’ ,sans-serif;
}
.busca {
margin: 0 80px 0 0;
}
.busca input {
box-sizing:border-box;
}
body::before {
content: ‘DICA -> NAVEGUE PELO MENU’;
background: #000;
color: #fff;
display: block;
text-align: center;
height: 30px;
line-height: 30px;
font-size: 20px;
margin-top: 55px;
}
#cabecalho {
padding-top: 0;
}
#cabecalho .menu.superior .nivel-um>li {
padding: 0;
width: 100%;
}
.menu.superior .categoria-paginas .nivel-dois li a {
white-space: inherit;
}
}


#19

Copiado completo dessa vez rs… porém o espaço continua lá :disappointed_relieved:


#20

Certo, me manda um print para eu ver como está copiado o código.