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?
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.
2 curtidas
Muito obrigada, mas onde coloco isso? 
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.
colei, até mostrou porém o texto menu fica cortado, acho que o espaço é pequeno…
Deixa as alterações salvas e me manda o link do seu site para eu ver se posso te ajudar.
eu salvei, mas agora tá aparecendo um bichinho azul que não aparecia antes de entrar no produto 
a loja é https://www.paperkids.com.br/
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;
}
}
Com os ajustes aqui está assim:
Ain, colei abaixo mas no meu celular ainda fica cortado 
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;
}
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.
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.
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.
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%;
}
}
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
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;
}
}
Copiado completo dessa vez rs… porém o espaço continua lá 
Certo, me manda um print para eu ver como está copiado o código.