WordPress OceanWP Pergunta: Personalizar o estilo do menu móvel

Um usuário perguntou ?

Olá,

Eu gosto do menu na minha versão desktop, mas estou pensando em personalizar um pouco o menu mobile.

Agora fica assim:

Eu quero alcançar algo assim. Tudo é muito pequeno. Pesquisa Ajax e ícones sociais mais atraentes e “botão fechar”.

Como é o menu móvel agora.

Isso é possível com a versão gratuita do OceanW, Elementor ou outro plugin gratuito no WordPress?

Como eu quero projetar meu menu móvel.

Obrigado pelas dicas!

Saúde,

microfone

lançador de tópicos

(@micwie)

2 anos, 1 mês atrás

Atualizar:

Eu costumava brincar um pouco com o Customizer e agora parece que sim.

Olha a imagem aqui.

Não consigo entender essas coisas:

1) Alinhe os itens do menu com o centro. 2) Adicione ícones sociais apenas ao menu móvel. 3) Altere o ícone do botão “fechar menu”. 4) Adicione mais espaço entre os itens do menu sem comprometer a posição e o alinhamento do botão “fechar menu”.

(@apprimit)

2 anos, 1 mês atrás

Olá,

1. Adicione o código CSS abaixo à seção Custom > Custom CSS.

ul#sidr-id-menu-mobile-menu {
    text-align: center;
}

2. Você precisa adicionar CSS para ocultar o ícone social na área de trabalho.

3. Personalize > Cabeçalho > Menu Móvel e adicione um ícone de classe completa para substituir o ícone padrão no campo ‘Close Menu Button Icon Class’.

4. Personalize > Writing > Mobile Menu e ajuste a altura da linha.

lançador de tópicos

(@micwie)

2 anos, 1 mês atrás

1. Funcionou perfeitamente. Obrigado.

2. Certo. Eu tentarei. Você tem alguma sugestão de código aqui?

3- Adicionei uma classe de ícones “fa-times” do Font Awesome (de acordo com o site deles), mas apenas um quadrado em branco é visto. Veja a foto.

Eu verifiquei as configurações do menu e os ícones da Awesome Font devem estar ativados para que funcione.

4. Funciona para texto, mas também rola o ícone do botão compacto. Veja a foto.

Eu também gostaria de destacar alguns itens com texto em negrito (móveis, acessórios e todas essas categorias), mas manter o estilo atual para o resto. é possível?

Obrigado!

Esta resposta foi modificada há 2 anos, um mês atrás por. Esta resposta foi modificada há 2 anos, um mês atrás por.

(@apprimit)

2 anos, 1 mês atrás

Olá,

1. De nada!

2. Adicione o seguinte código CSS à seção Custom > Custom CSS.

@media only screen and (max-width: 959px) {
.oceanwp-social-menu.clr.simple-social {
    display: none;
}
}

3. Porque o arquivo de suporte de fonte está desatualizado. Tente outra classe de ícones.

4. Adicione o código CSS abaixo para configurá-lo e remova a altura da linha que você adicionou por meio de configurações personalizadas.

#sidr li a {
    line-height: 1.5 !important;
}

5. Adicione o seguinte código à seção Custom > Custom CSS.

.category-bold {
    font-weight: bold;
}

Agora vá para Painel> Aparência> Menu> Abrir Item de Menu e adicione-o category-bold para a caixa CSS. Ative a caixa CSS na opção de exibição (canto superior direito) da página do menu.

lançador de tópicos

(@micwie)

2 anos, 1 mês atrás

Oi de novo,

Obrigado pela sua paciência, mas há algumas pequenas coisas que ainda não consigo corrigir:

2. O código CSS nem parece funcionar ou estou fazendo algo errado. Eu habilitei o menu social em Cliente/Cabeçalho/Menu Social. Funciona perfeitamente no celular, mas:

a) Um menu social agora é exibido dentro do menu normal da área de trabalho, mesmo que não devesse (código CSS, certo?)

Veja a imagem 01

b) Não consigo personalizar a aparência dos ícones sociais móveis. Quando você joga com o volume, nada acontece.

3. Funciona perfeitamente agora. Obrigado.

4. Funciona perfeitamente. Obrigado novamente.

Não funciona. Adicionado CSS dentro do SEC personalizado e também nos elementos do MENU.
Veja as fotos 2 e 3

Obrigado!

(@apprimit)

2 anos, 1 mês atrás

Olá,

2. Tente isso.

@media only screen and (min-width: 959px) {
.oceanwp-social-menu.clr.simple-social {
    display: none;
}
}

2b. No painel do menu social, clique no ícone do celular na parte inferior do painel. Depois disso, você pode estilizá-lo.

5. Substitua o código acima pelo código CSS abaixo na seção Custom > Custom CSS.

.category-bold a {
    font-weight: 600 !important;
}

agora adicione category-bold no campo de classe CSS, um item de menu como mencionei na minha resposta anterior.

lançador de tópicos

(@micwie)

2 anos, 1 mês atrás

Olá. Infelizmente, ambos os códigos parecem não funcionar :/ Eles foram adicionados, mas nada mudou. Você mesmo pode verificar acessando a página.

(@apprimit)

2 anos, 1 mês atrás

Não, eu não vi o código no código-fonte. Deve funcionar. Em relação ao ícone social, não vi nenhum ícone social em seu site. Você habilitou?

lançador de tópicos

(@micwie)

2 anos, 1 mês atrás

Olá. Envie-lhe as capturas de tela da interface. A captura de tela CSS mostra que o código foi adicionado, a próxima mostra que a versão desktop mostra ícones sociais (não deveriam), e a última mostra que o texto em negrito não funciona dentro do menu móvel.

(@apprimit)

2 anos, 1 mês atrás

A conexão conectada não funciona. Pode reenviar a imagem? Use isso para ícones sociais.

@media only screen and (min-width: 959px) {
.oceanwp-social-menu.clr.social-with-style {
    display: none;
}
}

Para tornar o link do texto do menu em negrito, adicione o seguinte código à seção Custom > Custom CSS

.sidr-class-category-bold a {
    font-weight: 600 !important;
}

lançador de tópicos

(@micwie)

2 anos, 1 mês atrás

O link deve funcionar. Fiz uma ligação direta. Agora deve funcionar.

Ambos os códigos CSS funcionam perfeitamente agora. Mais uma vez obrigado pela sua paciência!

microfone

(@apprimit)

2 anos, 1 mês atrás

De nada!

Isto foi útil?

0 / 0

Deixe uma resposta 0

O seu endereço de email não será publicado. Campos obrigatórios são marcados *