Simple Horizontal Navigation Bar – HTML/CSS Tutorial

Simple Horizontal Navigation Bar - HTML/CSS Tutorial

This video will demonstrate the absolute minimum to create a functional horizontal navigation bar using HTML5 and CSS. I will demonstrate how to center the nav bar as well as define the hover…
Video Tutorial Rating: 4 / 5

Don’t forget to check out our other video tutorials or share this video with a friend.

1 Star2 Stars3 Stars4 Stars5 Stars 0 votes
Loading... 9,784 views

22 responses to “Simple Horizontal Navigation Bar – HTML/CSS Tutorial”

  1. Ken Swartwout says:
  2. Valentina Stefanidis says:

    So helpful!! Thank you!

  3. RamAmandeep says:

    Thank you, this video helped me a lot!

  4. stixx musicforyou says:

    Thanks a bunch for this tut.i was trying to figure out how to center the
    li’sit makes perfect sense to give the ul a width.!!!


    Thank You so so so so so so much much respect bro. You just save me from
    this assignment it been taking me 3 hours to center all cause i was giving
    the code by default!

  6. lance cabiscuelas says:

    thanks a lot.

  7. nick caudron says:

    you helped me ! 😀 thanks !

  8. Cody Downs says:

    Awesome Stuff! Any chance you can add to this tutorial? I would like to
    know how to make it stay on screen when scrolling down. Thanks

  9. Gabzillaha says:

    Thanks for the tutorial, So what would i need to do to center this?

  10. michael govers says:

    Nice and easy to follow thanks man ;)

  11. Rubén Casillas Loza says:

    It’s funny how you keep saying how it is not important to center the nav
    bar, and that is exactly what I was looking for to learn.
    Great tutorial, good work!

  12. mskl177 says:

    Very helpful as a fairly new student of Dreamweaver. I will be watching
    many of your other videos. Thank you for all that you do.

  13. Martin Bluck says:

    Ken, thankyou so much for uplaoding this video; I’m interested in working
    in the web design industry and this has helped me massively to create a
    website to add to my portfolio. And it’s so clear to understand, I

  14. Daniel Simpson says:

    What do I replace the “#” with? Why have you put that there?!

  15. Teka Tek says:

    Nice :D

  16. Nightvision Games says:

    4:04 lil’ list

  17. Hiếu Trương says:

    easy to understand ,thanks pro

  18. Daniel Samuel says:

    At the beginning of the video when you made the nav bar black, mine doesn’t
    change colour. Do you have any advice? All the code is the same as yours by
    the way so i don’t have a clue what the problem is. thanks 

  19. Ricquel Beasley says:

    thank you quick and to the point

  20. Ashah Aqui says:

    Wow really helpful

  21. Fatima Mahmoud says:

    hello. this video helped a lot, but i am using jedit for my website and at
    some point, to get rid of the space on top, you put a star, how did you do

  22. CHAKLI m'barek says:


Leave a Reply

Your email address will not be published. Required fields are marked *