WordPress OceanWP Pergunta: Alterar preenchimento de plano de fundo para itens de menu

Um usuário perguntou ?

Eu gostaria que os itens de menu “Comprar” e “Contato” se parecessem com botões. Para isso, via Appearance->menu->CSS class, criei a classe CSS para cada ‘buy-navmenu’ e ‘contact-navmenu’. Eu adicionei o seguinte código CSS personalizado. No entanto, é necessário algum espaço entre os dois itens de menu e a altura da cor de fundo é muito alta e precisa ser reduzida. Saiba mais sobre as alterações de código que só podem ser espaçadas com esses dois itens de menu e como reduzir a altura da cor de fundo apenas para esses dois itens de menu.

.buy-navmenu{
  background:#2905a1;
border-radius: 10px;
}

.buy-navmenu a{
  color:#ee1f23 !important;
  font-weight: 900 !important;
}

.buy-navmenu a:hover{
  color:#13aff0 !important;
  font-weight: 900 !important;
}

.contact-navmenu{
  background:#6C6F70;
border-radius: 10px;
}

.contact-navmenu a{
  color:#2905a1 !important;
  font-weight: 900 !important;
}

.contact-navmenu a:hover{
  color:#13aff0 !important;
  font-weight: 900 !important;
}

Autor do tópico

(@oceanwp)

2 anos, 7 meses atrás

Olá, você gostaria de fazer algo assim?

Nesse caso, basta adicionar a classe “btn” aos seus itens de menu.

lançador de tópicos

(@inj9nhs3fhpabx4)

2 anos, 7 meses atrás

Sim, é o que parece, exceto que você precisa de dois botões de uma cor diferente. Além disso, quero que esses dois botões permaneçam como itens de menu no menu de cabeçalho principal, no widget de menu de rodapé e nos menus móveis. Qual é a sintaxe para renomear ambas as classes para btn? É para adicionar um apêndice -btn à classe?

O que você precisa mudar em seguida?

.buy-navmenu-btn{
  background:#2905a1;
border-radius: 10px;
}

.buy-navmenu-btn a{
  color:#ee1f23 !important;
  font-weight: 900 !important;
}

.buy-navmenu-btn a:hover{
  color:#13aff0 !important;
  font-weight: 900 !important;
}

Obrigado pela ajuda. Além disso, existe uma maneira de parafusar / flutuar um desses botões?

lançador de tópicos

(@inj9nhs3fhpabx4)

2 anos, 7 meses atrás

Tudo o que eu tinha que fazer era colocar ‘btn’ antes de ‘buy-navmenu’ para o nome da classe. Obrigado pela ajuda.

Autor do tópico

(@oceanwp)

2 anos, 7 meses atrás

Sim ?