Updated navbar with social media icons



English You asked, so here it is! An updated version of the web design lesson "Navigation bar with submenus". Now you can have your navbar completed with your social media icons.

If you don't have the navigation bar yet go get it here.

Got the code? In the end of the code you are going to see something like this:

Right? Now, add this code before the last 

Now you only need to switch the links of your social media and the links of the images of your social media icons where it says, for example "LINKFACEBOOK" and "LINKIMAGEFACEBOOK"!

If you feel that the images need to be a little bigger you just have to change the number were it says width. If you think that the icons need to bit a little bit up or a little bit down you just have to change the number were it says margin-top ( Leave this dash   -   ! If you want the icons a bit up you need to increase the number and if you want the icons a bit down you have to decrease the number! )

Hope it helps! Xoxo
Português Pediram-me e aqui está! Uma atualização da aula "Navigation bar with submenus". Agora podem ter a vossa barra com menu e submenus e ainda os vossos ícones das redes sociais no lado direito. Para quem já tiver usado o meu código para a barra de navegação e quiser adicionar os icones das redes sociais do lado direito só precisa de adicionar um código simples.

Se ainda não tiveres o código da barra clica aqui para ires à aula anterior.

Já tens o código? Agora vais encontrar no final do código algo assim:

Certo? Agora, antes do último coloca este código:

Agora só precisas de trocar onde diz, por exemplo, "LINKFACEBOOK" e "LINKIMAGEMFACEBOOK" pelos respectivos links e links de imagens dos ícones para ficar completo!

Caso achem que as imagens deveriam ser um pouco maiores só precisam de aumentar o número onde diz width. Se acharem que os botões precisam de ficar mais acima ou mais abaixo só precisam de alterar o número onde diz margin-top ( Deixem o sinal   -   ! Se quiserem puxar para cima aumentem o número, se quiserem colocar os ícones mais para baixo diminuam o número! )

Espero que tenha ajudado! Xoxo

8 Comments

  1. Andava mesmo à procura de uma uma barra assim, e felizmente encontrei a tua. É ótima e funciona super bem!! xx

    ResponderEliminar
  2. Quando tiver tempo para mudar o meu blog, eis que tenho aqui um grande código :)

    ResponderEliminar
  3. Gostei muito da tua dica.
    beijinho

    http://thegoldprint.blogspot.pt/

    ResponderEliminar
  4. Muito útil! Estou a pensar fazer umas mudanças brevemente no blog venho aqui atualizar a minha navbar eheh
    Messy Hair, Don't Care

    ResponderEliminar
  5. Veio mesmo a calhar, comecei um novo blog e, apesar de já ter decidido usar a tua navbar, mesmo sem as ligações para as redes sociais, assim dá ainda mais jeito :)

    ResponderEliminar
  6. Olá Maria, não consigo "montar" a barra de navegação como eu quero :( usei a primeira que partilhaste no teu blog, mas queria esta agora com os ícones que tinha na antiga (ainda presente no meu blog) e um pouco mais para a direita. Achas que me podes ajudar?
    Beijinhos
    www.walldrawingss.blogspot.pt

    ResponderEliminar
  7. Olá Maria. Será que era possível adicionares a esse código uma zona de pesquisa?

    ResponderEliminar

Follow Me On Instagram