Fixed Navigation bar

ENGLISH

Hello darlings!
Many of you already asked me to help you create an amazing fixed Navbar that you see in some amazing blogs.
Today's the day that I will help you create your own personalized Navigation bar.
Let's get started!

PORTUGUÊS

Olá pessoas lindas!
Muitas de vocês já me pediram para vos ajudar a criar a barra de topo fixa que se têm visto ultimamente em muitos blogs maravilhosos.
Hoje é o dia que vos ensino a criar a vossa própria e personalizada Navigation Bar.
Vamos lá começar!

    Getting Started    
  1# Disabling Blogger's navbar / Desactivar a barra do Blogger  
ENGLISH

The first thing you need to do is see if the predefined blogger's navbar is visible, if it is you need it to be invisible.
To do that you just need to go to the page LAYOUT, search for the rectangle that says NAVBAR and click on the Edit link. Then a pop-up will appear and you just need to click on OFF and then save. Go to the LAYOUT page again, and press on the SAVE ARRANGEMENT button.
PORTUGUÊS

A primeira coisa que deves fazer é ver se a barra pré-definida do blogger está activa, se estiver, tens de a desactivar e tornar invisível.
Para isso só precisas de ir à página ESQUEMA, procurar o rectângulo que diz NAVBAR e clicar no botão Editar. Depois irá te abrir um pop-up onde terás de clicar em Desactivada e guardar, voltar à página anterior e clicar em Guardar Disposição.
  2# Adding CSS / Adicionar CSS  
Adding Css is really important!
CSS, or Cascade Style Sheet, is the magic dust that will make your navbar gain color, height, width, and also gave it the ability to stay fixed in one point.
I added some comments to facilitate the process.

(See CSS - comments in English)
To add you CSS go to TEMPLATE page, click on EDIT HTML.
Search for and click on the triangle next to it, and put this css code before
Adicionar o código Css é muito importante! Css, ou Cascade Style Sheet, é o pózinho mágico que transforma visualmente o teu navbar numa coisa maravilhosa, podes personalizar a cor, a altura, a largura e até dar-lhe a possibilidade de fixar no topo do teu blog.
Adicionei alguns comentários no código (ver CSS - comentários em Português) para não teres tanta dificuldade.
Para adicionar o css vai à página MODELO, clica em Editar HTML.
Procura por e clica no triângulo que se encontra ao lado, e coloca o código css antes de .

    CSS - comments in English 


    CSS - comentários em Português 
  3# Adding HTML / Adicionar HTML  
We are almost done, I promised! We just need to add our html code, change some links and we're done!
Now, in the same page, search for  and put the code AFTER it. Change all the links that says www.lovable-maria.com to yours, and where it says "Link of your icons".

Estamos quase a terminar, prometo! Só precisamos de adicionar o código, mudar alguns links e estamos prontos!
Agora, na mesma página, procura por  e coloca o código HTML depois disso.
Muda todos os links que dizem www.lovable-maria.com para os teus, e onde diz "Link of your icon" para as imagens dos teus icons das redes sociais.
     HTML    


    Some social icon    
  
//Hope you liked our first online class. If you want me to do an online class about something  you want to learn, please send me a e-mail: maria@lovable-maria.com
//Espero que tenham gostado desta primeira online class. Se quiserem que faça uma aula sobre algo específico enviem-me um e-mail para: maria@lovable-maria.com

41 Comments

  1. Este tipo de posts são super úteis para pessoas como eu, que são umas nabas a personalizar o blog!

    ResponderEliminar
  2. estas coisas deixam-me em pânico, complico sempre xD Mas esta aulinha está bem simples :D

    ResponderEliminar
  3. Muito útil este post!
    Demorei três semanas até a minha estar impecável!

    Mas tenho uma pergunta para ti (que por mais que pesquise não encontro em lado nenhum!): sabes alguma maneira de centrar o texto da navbar? Por exemplo com a tua: teres o "Lovable Maria" ao centro? Já tentei de tudo, mas não consigo! :(

    Beijinho :*

    ResponderEliminar
  4. Que post tão útil linda! :) Andei em mudanças no meu blog e por acaso queria ter esta barra no topo, veio mesmo a calhar!
    Muitos beijinhooos *.*

    http://thebeautypalacejh.blogspot.pt/

    ResponderEliminar
  5. Adoro este tipo de posts, mas tenho uma perguntinha, e se eu quiser retirar a navbar fixa, como fasso??
    Beijinhos linda
    http://something-over.blogspot.pt/

    ResponderEliminar
  6. Olha Maria já me salvaste a vida :P Já queria há algum tempo ter algo assim do género no meu blog, em vez de ter os icones todos na barra lateral mas nunca tinha encontrado ninguém que fosse capaz de ensinar de forma tão simples como tu. É uma alteração pequenina mas faz muito diferença :3 Estou a adorar o novo look do meu blog ahahah, obrigadaaaa <3 Beijinhos*

    http://maisumblogdegaja.blogspot.fr/

    ResponderEliminar
  7. que post útil! já tive curiosidade em como se fazia, obrigada :pppp beijinhos!

    run-your-world.blogspot.pt

    ResponderEliminar
  8. Curioso porque passei o dia à procura disto! Fizeste o post na altura certa :p
    Assim já consegui xD

    ResponderEliminar
  9. És maravilhosa a fazer este tipo de posts! Só nos resta agradecer-te :)
    xx

    http://ruteritamaia.blogspot.com/

    ResponderEliminar
  10. É mais fácil do que parece haha. Gostei muito do post, faz mais!

    Beijinho,
    Rute Azevedo ♡ (Red Lipstick & Skinny Jeans)

    ResponderEliminar
  11. Olá. Não sei porquê, mas sempre que procuro no htlm por alguma coisa (como ) nunca encontra. Eu faço sempre da maneira certa, mas nunca resulta. Porque será? Não haverá outra maneira? beijo, obrigada :)

    ResponderEliminar
    Respostas
    1. Hello :) é mesmo estranho não conseguires procurar no html, podes-me mandar um print screen de como estás a fazer para o meu e-mail? :) Assim ajudo-te por lá*
      lovablemaria.blog@gmail.com

      Beijinhos,
      Maria*

      Eliminar
  12. ADOREI o post, super esclarecedor!

    xoxo,
    andy

    ResponderEliminar
  13. Professora Maria :D
    Achas que ficava bem com o blog ou nem por isso? :p
    Beijinho <3

    ResponderEliminar
  14. R: Não querida, já algum tempo eu coloquei o boneco de ir para o topo no blog e agora mesmo que queira mudar já não consigo :/ é por isso é que estou a perguntar se eu quiser mudar ou retirar a barra dps como é que faço (?)
    xoxo

    ResponderEliminar
  15. Este post é tão awesome :)
    É bom poder ter estas dicas para melhorar o blog

    Beijinho

    ResponderEliminar
  16. Fantástico post, fantástica organização na explicação. Gostei muito. :)
    Também tenho um quê que me puxa para o html, logo adoro isto.

    ResponderEliminar
  17. Ao tempo que procurava blogs que ensinavam a fazer isto , e finalmente encontrei ! Muito obrigada querida , foste uma grande ajuda , e tens um ótimo blog , continua assim! <3

    somethingwithsa-ra.blogspot.pt

    ResponderEliminar
  18. Amei!! Obrigada pelo post! A rubrica está muito fixe :)

    ResponderEliminar
  19. Como gostava de ter jeitinho para este género de coisas! O pouco que sei aprendi em blogs... Obrigada pela dica, fico à espera das próximas :) beijinhos!

    http://mydeardreamers.blogspot.pt/

    ResponderEliminar
  20. Ainda não testei, mas pelo que li parece-me um bom tutorial. Continua, e parabéns por uma bela ideia! :)

    ResponderEliminar
  21. Olá Maria, gostei muito do post! Mas tenho uma dúvida, na parte de adicionar o link dos ícones das redes sociais, não estou a ver como se faz essa parte (sou um bocado naba nisto).. Não me podes dar uma luzinha se faz favor? :)

    Beijinho*

    ResponderEliminar
  22. Já testei e está a funcionar super bem :)

    ResponderEliminar
  23. Fiz tudo como indicaste e não funcionou :s. O que estarei a fazer errado? :/
    Beijinho!

    ResponderEliminar
  24. Olá querida, tudo bem?
    Estou a tentar usar a barrinha como explicas e corre tudo lindamente, o unico problema é que aparece sem fundo. Sabes-me explicar porque? :(

    ResponderEliminar
  25. Isso era o que eu estava a fazer, mas não acontecia nada. Ficava sempre com a barra transparente.
    Aparentemente o problema era a ordem em que tinha aquilo em relação aos códigos anteriores que tenho pelo blog. Assim que meti mais para cima do /b:skin já apareceu uma corzita ehe

    Thanks anyway honey <3

    ResponderEliminar
  26. Preciso de ajuda :( a minha barra não fica 'fixa' já tentei de tudo

    ResponderEliminar
  27. Mil obrigadas! :D Já está, só mais uma pergunta, como meto ela assim transparente tipo a tua mas em cor branca?
    kiss, v!

    ResponderEliminar
  28. Done! :) Muito obrigado ficou espectaculoso <3 beijinhos

    ResponderEliminar
  29. Olá! Já consegui tudo, obrigada. Mas eu gostava de saber como é que ponho os links ao centro :)
    xx

    ResponderEliminar
  30. obrigada pela ajuda! resultou na perfeição!

    XOXO

    http://the-flashy-one.blogspot.pt/

    ResponderEliminar
  31. Olá maria, podias-me dizer como fizeste a barra ficar "transparente"?

    ResponderEliminar
  32. São óptimos! aconselho-te vivamente a comprares um xp
    Obrigado pela ajuda! agora só preciso de encontrar icons que combinem com a minha barra :)

    ResponderEliminar
  33. Olá Maria, fiz tudo como disseste e consegui da primeira vez, mas agora quis alterar a cor e não deu , então apaguei e fiz tudo de novo só que já não dá... Será que sabes o que estou a fazer mal ?
    Muito obrigada querida, beijinho <3

    www.somethingwithsa-ra.blogspot.pt

    ResponderEliminar
  34. Olá :) Fiz tudo como era suposto e funcionou! Mas eu queria meter a barra ao centro, e mudar o tipo de letra, e também meter a barra sempre fixa, ou seja, como tens a tua neste momento. Espero que me possas ser útil, obrigada!

    ResponderEliminar
    Respostas
    1. Olá Lígia, tudo bem? :)
      Não consigo encontrar o link do teu blog no teu perfil por isso vou-te responder por aqui :)

      no código que se encontra aqui a barra deveria ficar fixa porque no código .lovablenavbar {
      tem position: fixed;
      ou estás a dizer mesmo fixa e a não descer para baixo com o rato? se for isso retira onde diz position: fixed

      Quando à barra centrada, onde diz
      ul.lovablenav { vais encontrar a dizer width: 1000px;
      reduz esse número até a barra ficar mais pequena em largura e centrada :)

      Quanto a mudar o tipo de letra eu fiz outro tutorial onde ensina isso:
      http://www.lovable-maria.com/2014/06/online-class-favorite-font.html

      Beijinhos :)

      Eliminar
  35. Infelizmente não consegui... acho que pus tudo certinho mas não deu... Para voltar a tentar tenho que apagar tudo o que colei ou não?

    ResponderEliminar
  36. Olá Maria, sabes como delinear a barra? Isto é, fazer uma linha em baixo para fazer uma "separação" , não sei se me entendeste...
    Beijinho , e obrigada :)

    www.somethingwithsa-ra.blogspot.pt

    ResponderEliminar
    Respostas
    1. Olá Maria :)
      Eu já uso estas tuas dicas no meu blog de fotografia... No entanto estou a criar outro com mais duas colega, no qual queriamos por barra tal como explicas aqui,mas... sem redes sociais... como posso fazer? E para mudar a cor como faço?

      beijinhos **

      http://lilianaprataphotography.blogspot.pt/

      Eliminar