Caros, não estou conseguindo parametrizar minha loja no mobile, não consigo ver a palavra menu e ela esta sobreposta pelo campo de busca. Segue abaixo minhas especificações, como estou longe de ser especialista, não reparem nas minhas codificações (CSS) abaixo.
#cabecalho .conteiner {background: #ff6abe !important;}
.conteiner-principal .conteiner { max-width: 100%;}
.menu.superior {background: #ffffff;}
.logo a{height:170px;}
#cabecalho a.bem-vindo.cor-secundaria {
color: #FFFFFF;
width: 100%;
padding: 0px 63px;
}
#cabecalho .busca .botao-busca {
height: 36px;
width: 38px;
padding: 0px 8px 0px;
font-size: 25px;
background: #ffffff;
color: #ac7c15;
border-radius: 100%;
line-height: 35px;
top: 3px;
right: -56px;
}
#cabecalho .carrinho a i.icon-shopping-cart {
background: #ffffff00;
color: #fffffe;
}
#cabecalho .icon-list, .icon-user {
color: #ffffff;
background: #ac7c1500;
}
.acoes-conta>li i {
background: none;
color: white;}
@media (max-width: 768px){
@media only screen and (max-width: 767px){
.acoes-produto-responsiva {
position:relative;
top: 59%;
right: 0px;
text-align:center!important;
}
.preco-produto.destaque-preco {
margin-top:20px;
}
}
@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;
}
}