Ícone de Burger Icon é png e fica pixelado em displays retina about barra.govbr

[nicholasio]

Acho que não seria uma boa ideia incluir o Font-Awesome só para isso, iria aumentar o peso da barra sem necessidade...

[sahrosa]

Verdade @nicholasio! E se fosse um svg? :)

[nicholasio]

Ai seria uma melhor alternativa, tem que ver só quais browsers/versão a Barra pretende suportar e saber se todos eles suportam SVG.

[valessiobrito]

👍 lembrando que também é possível fazer ele somente com CSS3 no uso de "gradientes".

[sahrosa]

Ótima ideia @valessiobrito :)

[caduvieira]

Escolhi via CSS para melhor se adaptar pois ainda temos que dar suporte ao IE8. Podem dar uma olhada no http://barra.governoeletronico.gov.br/teste para dar opiniões sobre o menu.

[valessiobrito]

@caduvieira muito bom trabalho! Só achei largo demais. Sugiro usar: width: 20px; Também remover "left:0px" para "right: 5px;" assim fica posicionado na direita. Por fim, troca a cor das barras #000 para um tom cinza #999 e :hover remove o background cinza, aplicando a cor da barra #000 ... vai ficar bonitinho. 👍

[sahrosa]

Muito bom @caduvieira! E ótimas dicas @valessiobrito, concordo em tudo! Eu só sugeriria usar o #606060 ao invés de #999 para seguir as cores dos outros itens da Barra Brasil!

E mais uma adição apenas, no meu celular e computador (ambos Chrome) está mostrando as três barrinhas desalinhadas (conforme print abaixo).

[valessiobrito]

@caduvieira tenta usar pixel para fixar largura das barrinhas; Acho que o espaçamento vai ser mais complicado.

[caduvieira]

@valessiobrito @sahrosa Feito. Estará na próxima versão.

[sahrosa]

Show!!