Navigation Bar | with submenus

Hello darlings!

Another online class in web design, iey!

This one has been one of your top requests! In this online class you are going to learn how to create a navigation bar with submenus, just like mine.

If you don't want sub menus on your navigation bar you can learn how to do a simple one in my first online class.

Let's get started?

Let's add css first. To do that you have to go to to TEMPLATE page, click on EDIT HTML. Search for and click on the triangle next to it, and put this css code before
Right before that add this code:

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 bellow AFTER it. Change all the links to yours and the name of your categories, add more submenus or simple buttons and you're done.

Where it says SIMPLE change it to the name of your category that doesn't have submenus and near that you are going to find LINK, and you need to put there the link of that category. Where it says SUBMENU change it to the name of the category that has submenus (this one doesn't have a link, so don't add it). Right bellow SUBMENU you are going to see some words: NAME 1, NAME 2, change it to the names of your labels, and near each word you are going to see the word LINK , just change that word for the link of each label. Easy?
This code was made by me, hope it helps in some way.


16 Comments

  1. Muito util, tenho de experimentar!
    Nova parceria e por isso novo post no blog!! xx,

    http://essenceoffashionn.blogspot.pt/20…/…/Young-spirit.html

    ResponderEliminar
  2. Segui o teu tutorial do menu anterior e adorei. Tenho a certeza que este funcionará tão bem como o outro por isso OBRIGADA, Maria. <3 Beijinhos da Pirralha

    ResponderEliminar
  3. Obrigada por partilhares o teu conhecimento de web design connosco, é muito útil futuramente. Beijinhos :)

    ResponderEliminar
  4. Blog mais fofo, pensava que eras inglesa aw :3

    ResponderEliminar
  5. Gostei muito do tutorial, vou guardá-lo para se um dia precisar :)

    beijinhos
    http://pretty-little-stories.blogspot.com

    ResponderEliminar
  6. Andei tanto tempo à procura disto! Obrigada Maria :)
    xoxo, Ana

    The Insomniac Owl Blog

    ResponderEliminar
  7. Thanks so much for this tutorial! This was so clear and easy to follow in comparison to others I've seen!

    Gem
    gemsbabble.blogspot.com

    ResponderEliminar
  8. Oh eu tentei mas não consegui, penso que segui os passos todos mas ao terminar ao ver o blog aparecem-me os links todos de lado. O que achas que fiz mal? :x
    beijinhos

    thefancycats.blogspot.com

    ResponderEliminar
  9. R: Obrigada Maria! Eu as cores e isso ainda consigo fazer haha. Já estive a mudar o tal código mas mesmo assim deve estar algo errado xD Mas não precisas de te maçar com isso! Obrigada na mesma. <33
    beijinhos

    ResponderEliminar
  10. Very easy to follow and simple, thank you for sharing with us!

    ResponderEliminar
  11. Eu desisto dá-me sempre erro a por a barra :c sou um zero à esquerda nesta coisa :c

    ResponderEliminar
  12. é verdade querida, usei este tutorial no meu template e funcionou às mil maravilhas. Mas teve de ser todo do zero, porque eu tinha o antigo sem submenus, e editá-lo para ficar como este - isso não funcionava, dava erro. :p

    ResponderEliminar
  13. Ah e inclui-o também no template que estou a disponibilizar para download :p

    ResponderEliminar
  14. Segui os passos e consegui fazer na perfeição!
    Obrigada Maria! :)

    http://glamourandsparkletrends.blogspot.pt/

    ResponderEliminar
  15. Muito obrigada pelos teus tutoriais. Têm ajudado muito :)
    Não há forma de colocar o menu por baixo do cabeçalho?
    Beijinhos

    http://aboemiacatita.blogspot.pt

    ResponderEliminar
  16. Olá Maria :) encontrei o seu blog por recomendação de uma amiga :)
    Tenho um blog há muitos anos e gosto muito, mas uma coisa que me desagrada é a aparencia, gostava de algo um pouco mais sofisticado, e estes separadores é uma coisa que gostava muito, mas não consegui fazer isto, não sou muito expert em computadores e essa linguagem de códigos até me mete medo :( a primeira parte até percebi, a segunda nadaaa :( será que conseguia por as coisas mais simples ou a coisa tem que ser assim mesmo complicada :)
    beijinhos e parabéns pelo blog e canal de youtube tem muitas dicas muito boas

    ResponderEliminar

Follow Me On Instagram