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.

0 votes

Loading... 11,262 views

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

1. Ken Swartwout says:

   01/05/2015 at 3:39 am

   Reply
2. Valentina Stefanidis says:

   01/05/2015 at 4:01 am

   So helpful!! Thank you!

   Reply
3. RamAmandeep says:

   01/05/2015 at 4:10 am

   Thank you, this video helped me a lot!

   Reply
4. stixx musicforyou says:

   01/05/2015 at 4:35 am

   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.!!!

   Reply
5. KPRUDHOMME KERBY says:

   01/05/2015 at 4:41 am

   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!

   Reply
6. lance cabiscuelas says:

   01/05/2015 at 5:25 am

   thanks a lot.

   Reply
7. nick caudron says:

   01/05/2015 at 6:14 am

   you helped me ! 😀 thanks !

   Reply
8. Cody Downs says:

   01/05/2015 at 6:20 am

   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

   Reply
9. Gabzillaha says:

   01/05/2015 at 6:28 am

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

   Reply
10. michael govers says:

    01/05/2015 at 6:37 am

    Nice and easy to follow thanks man ;)

    Reply
11. Rubén Casillas Loza says:

    01/05/2015 at 7:29 am

    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!

    Reply
12. mskl177 says:

    01/05/2015 at 8:28 am

    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.

    Reply
13. Martin Bluck says:

    01/05/2015 at 8:58 am

    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
    subscribed.
    Thanks.

    Reply
14. Daniel Simpson says:

    01/05/2015 at 9:25 am

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

    Reply
15. Teka Tek says:

    01/05/2015 at 9:50 am

    Nice :D

    Reply
16. Nightvision Games says:

    01/05/2015 at 10:44 am

    4:04 lil’ list

    Reply
17. Hiếu Trương says:

    01/05/2015 at 10:59 am

    easy to understand ,thanks pro

    Reply
18. Daniel Samuel says:

    01/05/2015 at 11:04 am

    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 

    Reply
19. Ricquel Beasley says:

    01/05/2015 at 11:32 am

    thank you quick and to the point

    Reply
20. Ashah Aqui says:

    01/05/2015 at 11:44 am

    Wow really helpful

    Reply
21. Fatima Mahmoud says:

    01/05/2015 at 12:18 pm

    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
    that?

    Reply
22. CHAKLI m'barek says:

    01/05/2015 at 12:41 pm

    thanks

    Reply