Pergunta do WordPress Storefront: Texto do Storefront Text Menu de Navegação Secundário Cor do texto e cor do hove

Um usuário perguntou ?

Quero que a cor do texto seja branca e a cor do foco seja prata. Não tenho ideia de qual código inserir e não há nada na internet. Eu tenho um pacote de energia, mas ele não parece querer mudar o que eu quero.

(@antibiz)

1 ano, 8 meses atrás

Eu tenho o código para adicionar um cs extra para tornar o menu preto. Mas quando eu mudo o texto para branco no power pack, ele muda todo o menu.

Tudo que eu preciso é o texto branco do menu de navegação secundário com um destaque prateado nos botões suspensos.

(@riaanknoetze)

1 ano, 8 meses atrás

Olá,

Para dúvidas sobre o Powerpack, a melhor abordagem é abrir um ticket de suporte em

Dito isso, concentre-se sozinho no submenu, você precisará de CSS personalizado, pois a configuração do Powerpack por si só não é suficiente. Embora eu não tenha 100% de certeza do resultado desejado, o seguinte CSS personalizado é um bom ponto de partida:


@media screen and (min-width: 768px)
  .main-navigation ul.menu ul.sub-menu, 
  .main-navigation ul.nav-menu ul.children {
    background-color: #000;
  }

  .main-navigation ul.menu ul li a, 
  .main-navigation ul.nav-menu ul li a {
    color: #fff;
  }
}

Espero que ajude!

(@antibiz)

1 ano, 8 meses atrás

Eu tive que remover esta parte para fazer funcionar: (Existe um código de cor flutuante? Eu quero cinza/prata se possível)

@metade da tela e (largura mínima: 768px)

.main-navigation ul.menu ul.sub-menu, .main-navigation ul.nav-menu ul.children {cor de fundo: #000; }

.main-navigation ul.menu ul li a, .main-navigation ul.nav-menu ul li a {color: #fff; }}

Esta resposta foi modificada 1 ano e 8 meses atrás por.

(@riaanknoetze)

1 ano, 8 meses atrás

Bom truque para remover esses estilos de mídia!

Certas cores de foco certamente podem ser definidas para esses links com CSS personalizado. O seguinte deve funcionar perfeitamente:


.main-navigation ul.menu ul li a:hover,
.main-navigation ul.nav-menu ul li a:hover {
  color: #ccc;
}

(@antibiz)

1 ano, 8 meses atrás

É verdade que a rolagem altera a rolagem do texto, mas não atrás da rolagem quadrada, como blocos de links reais, pois a rolagem padrão fica cinza.

Existe um código para isso?

(@riaanknoetze)

1 ano, 8 meses atrás

Definitivamente sim – embora eu não tenha certeza de qual cor você deseja alterar, o seguinte a mudará para vermelho para fins de ilustração:


.main-navigation ul.menu ul a:hover, .main-navigation ul.menu ul li.focus, .main-navigation ul.menu ul li:hover>a, .main-navigation ul.nav-menu ul a:hover, .main-navigation ul.nav-menu ul li.focus, .main-navigation ul.nav-menu ul li:hover>a {
  background: #ff0000;
}

No front-end, ficará assim:

Link para imagem:

(@antibiz)

1 ano, 8 meses atrás

Ok, vou tentar o código, mas quando usei o outro código, quebrou o menu na versão mobile. Como se viu, não faria uma lista suspensa aparecer.

(@antibiz)

1 ano, 8 meses atrás

A cor de foco não me permite combinar esses dois códigos. Eu quero obter um menu preto, com texto branco, com uma cor de foco cinza/prata (não no texto, mas nos blocos).

Este código me dá o menu preto com texto branco, mas a cor de foco não funciona.

.main-navigation ul.menu ul.sub-menu, .main-navigation ul.nav-menu ul.children {cor de fundo: #000; }

.main-navigation ul.menu ul li a, .main-navigation ul.nav-menu ul li a {color: #fff; }} .main-navigation ul.menu ul a: hover, .main-navigation ul.menu ul li.focus, .main-navigation ul.menu ul li: hover> a, .main-navigation ul.nav-menu ul a: hover, .main-navigation ul.nav-menu ul li.focus, .main-navigation ul.nav-menu ul li: hover> a {background: #ff0000; }

(@ryanr14)

1 ano, 7 meses atrás

Olá @antibiz,

Acho que este SEC pode ajudar. ?


/** Make menu hover background black **/
.main-navigation ul.menu ul.sub-menu {
  background-color: rgb(0, 0, 0);
}

/** Make sub-menu text & hover white **/
.sub-menu a,
.nav-menu .sub-menu a:hover {
    color: #fff !important;
}

/** Make sub-menu background hover background silver **/
.sub-menu li.menu-item:hover {
    background: silver;
}

ANTES: Link para a imagem:

DEPOIS: Link para a imagem:

Esta resposta foi modificada há 1 ano e 7 meses. Esta resposta foi modificada há 1 ano e 7 meses.

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 *