CSS Tutorial 5 – Navigation Bar using only CSS

CSS Tutorial 5 - Navigation Bar using only CSS

In this tutorial I show a great method of making a navigation bar with rollover effects using only css. A good navigation bar is one that requires no javascr…
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... 4,111 views

20 responses to “CSS Tutorial 5 – Navigation Bar using only CSS”

  1. Colin Thomson says:

    Thank you, clear and very helpful.

  2. SnakeBiteScares says:

    Are you guys really that unwilling to learn this that you have to ask for someone else’s work instead of doing it yourself? Go learn CSS, it’ll be much better for you than just taking bits of other people’s work

  3. Rahul Raj says:

    google it better tutorial are there with full source code

  4. Emil Eremiev says:


  5. Rayden Kyle says:

    This is great, thanks!

  6. Dovahkiin DragonBorn says:

    crap tutorial my ass…. this is great thanks man

  7. Jesukumar Ravikumar says:

    Great tutorial!

  8. makedaevilmage says:

    Ok, so i’ve finally managed to make it work like this:
    Seems to be working just fine, also for the hover-over 😛

  9. makedaevilmage says:

    Just tried 1000×25 image, doesn’t show up in the navbar either … :S

  10. makedaevilmage says:

    Was just trying to do this tutorial, but for some reason the pic i made (1x25px) is not showing up in the navbar:
    background: url (navbarcolor.jpg) repeat-x;
    Dunno if i missed something there … great tutorial though 😀

  11. Spectre723 says:

    Hey man, great tutorial, but I have a couple of questions. First, if you wanted the navigation bar to remain in contact with the top, left and right edges of the browser, regardless of zoom level, what in the code you wrote in this video would you change/add? I have managed to do it but I had to use negative margins, which I feel isn’t actually necessary. Secondly, why not use em or % for the font-size,line height, width, height etc.? Thanks in advance.

  12. PieEatinSuicideGrunt says:

    could you upload your files so we can download them?

  13. tereisagainstyou2 says:

    what about joining the links?!

  14. bryronify says:

    awesome tutorial.. watched another one using ul/li and I just cant seem to implement it on my project.. this one is much easier to do with the same effect..

    btw how do i center all the buttons so that they wont be all in the left side but in the center of the website? anyone?

  15. Kyle Blaylock says:

    thanks man! very helpful! how do i link the banner pictures to my local files instead of a url? i would rather use my home files vs. hosting them.

  16. MrSwagger151 says:

    Yeah, now now nothing is working.

  17. MrSwagger151 says:

    Everything worked up until the .button a{

    part in the css doc. When I save and refresh like you did, nothing changes. Grrrrr.

  18. delt01 says:

    … anyways, kudos for pulling this off without using any Javascript (and thanks again for showing us how to do it) 😀

  19. delt01 says:

    2:35 I’m using 1280×1024 on a CRT here, and i have a laptop that has a 1024×768 screen. My parents have an iMac that has a screen of something like 1400×960 pixels.

    How do i make a web page with a nav.bar look good on all of these?

  20. abishan10 says:

    What does “float:left” do? I’m doing a piece of ICT AS Coursework and I am supposed to have a column on the left side of the page 200 pixels wide (reserved for a vertically orientated text-based navigation bar). It’s working fine atm, but I assumed that since it wants it on the left side of the page that I should use float:left. But it seems that it should not have any float.

Leave a Reply

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