Mudar posição do MENU para mobile/celular

pierrim · Novembro 25, 2019, 12:55pm

Usei um codigo postado aqui na comunidade para mudar o botao MENU, e agora quero mudar ele de lado… gostaria de colocar ele do lado esquerdo antes do campos de pesquisa, isso no layout para celulares… o código que estou usando é esse

/* Escrevendo MENU - Mobile/celular */
@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;
}

}

alguem poderia me ajudar?

Ivanilson_Gomes · Novembro 25, 2019, 4:49pm

Manda o endereço da sua loja!

No aguardo…

pierrim · Novembro 25, 2019, 8:53pm

www.pierrimagazine.com.br

Ivanilson_Gomes · Novembro 25, 2019, 10:19pm

Substitua por esse:

/* Escrevendo MENU - Mobile/celular */
@media(max-width: 767px){
    .conteudo-topo .busca-mobile {
        display: flex;
    }
    .conteudo-topo .busca-mobile .atalho-menu::before {
        content: 'Menu';
        font-weight:bold;
        font-family: 'Raleway' ,sans-serif;
    }
     .busca {
        width: 90%;
        margin: 0 0 0 2%;
    }
    .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;
    }
}

Se desejar mais serviços, entre em contato comigo!
Tenho várias soluções pra deixar a sua loja cada vez melhor!
wpp da agência: 85 9 91256674

Até mais!

pierrim · Novembro 27, 2019, 9:15pm

Muito Obrigado era isso mesmo… que eu queria…!!!

me chama pelo whatsapp da loja, pra gente conversar quero ouvir suas sugestoes de mudança/alterações!!!

Ivanilson_Gomes · Novembro 27, 2019, 9:25pm

Não por isso!
Fico feliz que eu tenha ajudado em algo. Pode deixar que eu chamo sim!

Até mais!

Elivelton_Rodrigues · Janeiro 28, 2020, 1:56pm

gostei do modelo sanduíche da sua loja em mobile poderia me ajudar com o CSS?
queria coloca o modelo da minha tipo essa Screenshot_1

humatec · Julho 16, 2020, 11:49pm

Ivanilson, boa noite!

Usei o seu código e realmente deu certo, porém, quando clico no menu a barra de pesquisa some, mas o ícone da lupa, não sobrepondo parte do menu. Você poderia me auxiliar nesta questão?

Obrigado.

Heitor_Peixoto · Setembro 26, 2020, 10:23pm

Olá Ivanilson, tudo bem? Será que você consegue me ajudar?
Utilizei o código que você passou para alterar para a palavra MENU na versão mobile. Porém o meu site, qnd clico para expandir o menu, fica como mostro na imagem abaixo.
O que devo fazer para arrumar isso?

Link da loja: www.bazzarsantana.com.br

Yuri.Rodrigues · Outubro 6, 2020, 9:08am

/* Escrevendo MENU - Mobile/celular */
@media(max-width: 767px){
.conteudo-topo .busca-mobile {
box-sizing: border-box;
}
.conteudo-topo .busca-mobile .atalho-menu {
display: flex;
}
.conteudo-topo .busca-mobile .atalho-menu::before {
content: ‘Menu’;
font-weight:bold;
font-family: ‘Raleway’ ,sans-serif;
}
.busca {
width: 75%;
margin: 0 0 0 0;
}
}

Yuri.Rodrigues · Outubro 6, 2020, 9:08am

@humatec

/* Escrevendo MENU - Mobile/celular */
@media(max-width: 767px){
.conteudo-topo .busca-mobile {
box-sizing: border-box;
}
.conteudo-topo .busca-mobile .atalho-menu {
display: flex;
}
.conteudo-topo .busca-mobile .atalho-menu::before {
content: ‘Menu’;
font-weight:bold;
font-family: ‘Raleway’ ,sans-serif;
}
.busca {
width: 75%;
margin: 0 0 0 0;
}
}

Eduardo_Siqueira · Outubro 6, 2020, 4:29pm

Estou com o mesmo problema

Heitor_Peixoto · Outubro 23, 2020, 3:28am

Não deu certo também desta maneira irmão, o menu fica com um simbolo estranho, não fica escrito a palavra MENU.

Yuri.Rodrigues · Outubro 23, 2020, 2:08pm

/* Escrevendo MENU - Mobile/celular */
@media(max-width: 767px){
.conteudo-topo .busca-mobile {
box-sizing: border-box;
}
.conteudo-topo .busca-mobile .atalho-menu {
display: flex;
}
.conteudo-topo .busca-mobile .atalho-menu::before {
content: ‘Menu’;
font-weight:bold;
font-family: ‘Raleway’ ,sans-serif;
}
.busca {
width: 75%;
margin: 0 0 0 0;
}
}

Heitor_Peixoto · Outubro 24, 2020, 2:10am

Boa noite Yuri, primeiramente muito obrigado pela ajuda. O código que você me mandou, qnd eu abro pelo meu celular, fica do jeito da foto que estou mandando em anexo. O que devo fazer pra arrumar isso?

Estou usando este código:

/* Escrevendo MENU - Mobile/celular */
@media(max-width: 767px){
.conteudo-topo .busca-mobile {
box-sizing: border-box;
}
.conteudo-topo .busca-mobile .atalho-menu {
display: flex;
}
.conteudo-topo .busca-mobile .atalho-menu::before {
content: ‘Menu’;
font-weight:bold;
font-family: ‘Raleway’ ,sans-serif;
}
.busca {
width: 75%;
margin: 0 0 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;
}
}

Yuri.Rodrigues · Outubro 24, 2020, 8:57am

Ixxi não sei, não entendo de programação pego os código aqui e testo e o pessoal me ajuda, esse código deu certo no meu deve ser algum outro que está atrapalhando ele.

Atualmente uso esse

@media (max-width: 767px){
.busca {
width: 100%;
margin: 0 0 0 0;
}
.atalhos-mobile a.icon-home{
display: none;
}
.menu.superior ul{
position: fixed;
top: 45px;
left: 0;
z-index: 9999;
border-radius: 0 0 .5rem 0;
}
}

Lucas_Soares1 · Maio 4, 2021, 2:34pm

O CÓDIGO NAO FOI POR CAUDA DAS ASPAS ESCRITAS ERRADAS

@media(max-width: 767px){
.conteudo-topo .busca-mobile {
box-sizing: border-box;
}
.conteudo-topo .busca-mobile .atalho-menu {
display: flex;
}
.conteudo-topo .busca-mobile .atalho-menu::before {
content: ‘Menu’;
font-weight:bold;
font-family: ‘Raleway’ ,sans-serif;
}
.busca {
width: 70%;
margin: 0 0 0 0%;
}
}

ricardojrd · Novembro 18, 2021, 1:15pm

Bom dia, primeiramente obrigado pela sua contribuição, sabe o código para a barra de pesquisa ficar em cima e o menu em baixo centralizado no mobile?

Tópico		Respostas	Visualizações
Mudar menu mobile Layout	6	341	18 de Maio de 2023
Palavra "Menu" no Botão de Menu Mobile Layout	5	386	20 de Maio de 2021
Mudar cor menu superior mobile e desfixar Layout	1	538	18 de Março de 2022
Tirar menu mobile Layout	10	1196	3 de Setembro de 2021
Menu lateral nao funciona no mobile Layout	4	338	21 de Dezembro de 2021

Mudar posição do MENU para mobile/celular

Tópicos relacionados