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”.
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.
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?)
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