Palavra "Menu" no Botão de Menu Mobile

Layout
1

Fala Galera, beleza? Me chamo Lucas, acredito que muitos de vocês já tenham reparado na dificuldade dos clientes em encontrar o Menu de nossos sites no acesso Mobile, e quanto mais facilitarmos o entendimento deles é melhor. Eu gostaria por favor de um auxilio da comunidade afim de incluir a palavra MENU no lugar do SVG (3 linhas) que consta no botão do menu.
Procurei pela comunidade encontrei tópicos sobre o assunto, mas nada que resolva minha questão.
Abaixo a imagem de como é, e como acho que deve ficar a loja da qual eu tomo conta do setor de criação e design, e nessa pandemia acabei assumindo ela no geral, me viro sempre que posso, mas essa alteração eu desiste de fazer sozinho. Hehe.
Obrigado desde já galera.

Sem Título-1
Sem Título-11202×638 256 KB

1 curtida
4

Bom dia amigo! Tentei solucionar o seu problema, basta conferir se o código é funcional.
Para inserir em sua loja basta adicionar na aba do CSS
Lembrando que o botão eu printei por cima para agilizar o processo, para uma melhor qualidade, basta substituir o link do “imgur” no campo background.

@media only screen and (max-width: 767px)
.menu-mobile-botao .navbar-toggle {
    background: none;
    padding: 6px 9px;
    background-color: rgba(244, 244, 244, 0.1);
    box-shadow: 0px 3px 3px 0px rgb(20 20 20 / 20%);
    line-height: inherit;
    -webkit-border-radius: 5px;a
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: transparent url(https://i.imgur.com/m5UoDg4.png) center no-repeat!important;
}

svg#icone-departamentos path {
    display: none;
}
1 curtida
5

Fala Teus, obrigado pelo auxilio, com seu código o SVG sumiu, porém a imagem não apareceu no lugar. Deve ter algum outro código conflitando, vou continuar olhando aqui. Mais uma vez obrigado.

Sem Título-1
Sem Título-1408×870 81.7 KB

1 curtida
6

Bacana então! Tenta esse… se não funcionar realmente tem algum código impactando. No código anterior marcou como !important;?

li.menu-mobile-botao {
    background: transparent url(https://i.imgur.com/m5UoDg4.png) left no-repeat;
}
1 curtida
7

To quase lá.
Utilizei partes dos 2 códigos que me passou. Valeu!

/* ALTERA MENU MOBILE*/
}

svg#icone-departamentos path {
display: none !important;
}

button.navbar-toggle {
background: transparent url(https://cdn.awsli.com.br/1274/1274265/arquivos/menu-v2.png) center no-repeat !important;
}

8

Teus_G. Valeu a ajuda, deu a luz que me faltava. Muito obrigado.
Segue o Código final, aproveitei e criei um ícone SVG.

/* ALTERA MENU MOBILE*/

svg#icone-departamentos path {
display: none !important;
}

button.navbar-toggle {
background: transparent url(https://cdn.awsli.com.br/1274/1274265/arquivos/botao-mobile-menu-V4.svg) center no-repeat !important;
}

3 curtidas