O que fazer pra evitar de quebrar a regra 2.7 na versão mobile, ao utilizar o color branco no nav?


Postado

Olá, pessoal. Como vão? Bem, a aula de hoje é sobre o nav, na versão mobile. Primeiro, olhem pra isso:


Imagem 1

Ele parece estar quebrando a regra 2.7? - Ou seja, o texto do nav tá ruim pra ver, ou não dá pra enxergar nenhuma palavra?

A primeira vista vocês irão dizer: pra mim tá normal, dá pra ver direitinho.

Bom, parece estar dentro da regra 2.7, mas ao ver na versão mobile, o que ocorre é isso:

Imagem

Uma boa parte do texto do nav vai para um menu com fundo branco. E quando o color do nav a é branco, fica quebrando a regra 2.7. Então, como resolver?

Primeira jeito:

Adicionar no nav a um background da mesma cor que tem no nav. Exemplo:

#nav {

background: #101010;

}
#nav a {
color: #fff;
background-color: #101010;

}

Tem que deixar background-color em vez de background, pois pode não aceitar a cor.

Como fica:

Imagem

Segundo jeito:

Adicionar um text-shadow.

Exemplo:
#nav {

background: #101010;

}
#nav a {
color: #fff;
text-shadow: 1px 1px 0px #101010;

}

Como fica:

Imagem

Terceiro jeito:

Adicionar código Dropdown.

Exemplo:
#nav {

background: #101010;

}
#nav a {
color: #fff;


}
#nav .dropdown-menu > li > a{

color:#000!important;

}

Como fica:


Imagem

Porém, ao usar algum efeito no nav a, como o text-shadow, mesmo utilizando o dropdown, o afeta. Vejam:

Imagem

Então, se não gosta que fiquem assim, adiciona isso nele:

Antes:
#nav a {

color:#fff;

text-shadow: 1px 3px 1px #424140, 1px -3px 1px #424140;
}
#nav .dropdown-menu > li > a{

color:#000!important;

}

Depois:
#nav a {

color:#fff;

text-shadow: 1px 3px 1px #424140, 1px -3px 1px #424140;
}
#nav .dropdown-menu > li > a{

color:#000!important;
text-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
}

Como ficou:

Imagem

Esse: text-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent; - anulou o text-shadow do menu dropdown, sem afetar o do nav a.

Terá situação, que precisará usar um background no nav a para algum efeito. Então, ele ficará assim - ignorem a cor preta do menu dropdown e o tex-shadow do nav, esqueci de remover:


Imagem

Sendo que você não o quer dessa cor. Então adiciona isso:
#nav .dropdown-menu > li > a{
color:#000!important;
background-color: #fff;
}
Esse background brando substituirá o que tava, sem remover o background do nav a.

Vejam como ficou:

Imagem

Resumindo: se não queres nenhum efeito no menu dropdown, adicione tudo abaixo disso: #nav .dropdown-menu > li > a{, anulando-o. Se adicionar no nav a: text-shadow: 1px 1px 0px #000; - adiciona nele: text-shadow: 0px 0px 0px transparent; e assim por diante.


Bom, só isso. Depois edito essa aula. Ainda cansada de ontem. x-x


Gostou da Jornal? Compartilhe!

Gostou? Deixe seu Comentário!

Muitos usuários deixam de postar por falta de comentários, estimule o trabalho deles, deixando um comentário.

Para comentar e incentivar o autor, Cadastre-se ou Acesse sua Conta.


Carregando...