Simple Navigation Bar With CSS And (x)HTML

Last week I showed how you can create a simple menu using an (x)HTML list and CSS. Today I thought I’d use the same technique to create a simple navigation bar. Once again we’ll structure things with a list of links and use some CSS to turn that list into a navigation bar.

(x)HTML List

Just like last time the (x)HTML structure will be an unordered list with links inside each of the list items. In fact it’s basically the same list used in the menu example (with a different id applied) in part to show how powerful CSS can be in generating a different look to the same (x)HTML structure.

[code type=css]

[/code]

Just a typical list of links with an id of list-nav applied to allow us to specify the list in the CSS. The code as it is now will look like:

Styling The Navigation Bar With CSS

Let’s start by setting padding and margin on the list itself so we have things looking the same in Firefox and IE. We’ll also remove the bullets and set a width on the overall list.

[code type=css]
ul#list-nav {
margin:20px;
padding:0;
list-style:none;
width:525px;
}
[/code]

List items normally display as block level elements, but here we want them to display inline to achieve the look of a navigation bar as opposed to a menu.

[code type=css]
ul#list-nav li {
display:inline
}
[/code]

For the links we’ll again take out the underline, add a little padding, give the links the familiar green background color and white text color. We’ll also give the links a width and use 100px for each link. The key this time will be in positioning the links by floating each one left.

[code type=css]
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:100px;
background:#485e49;
color:#eee;
float:left;
}
[/code]

The navigation bar is now taking shape and should look like:

All that’s really left is to add some styling touches and also a rollover effect.

Finishing Touches

The text looks a little off up against the left egde of the bar so let’s center it. We’ll also add a white border in between the links to help differentiate where each one begins and ends.

[code type=css]
ul#list-nav li a {
text-align:center;
border-left:1px solid #fff;
}
[/code]

Here the border has only been applied to the left side of each link. This leaves a 1px border on the left edge of the overall navigation bar, but since it’s currently sitting on a white background it disappears into that background. Depending on the structure of the rest of your document this could throw the positioning of things off by 1px, but it’s easy enough to remove the border from the leftmost link if it’s an issue.

We’ll do the same thing with the rollover as last time. We’ll just change the color of the background and the color of the text itself. Naturally enough the CSS is exactly the same we used in previously when creating the rollover on the menu.

[code type=css]
ul#list-nav li a:hover {
background:#a2b3a1;
color:#000
}
[/code]

The complete navigation bar should look like:

Just as with the simple menu the navigation bar is also quite simple. In fact if you compare the code for both you’ll find that the majority is exactly the same for each. The (x)HTML is the same with the exception of the different id, as is much of the CSS. The major differences here are making the list wider since the navigation bar is wider then the menu, and changing the list items to display inline and floating the links left to get them to display next to each other instead of stacked on top of each other.

Complete Navigation Bar (x)HTML And CSS

The complete code for our simple navigation bar is:

[code type=html]

[/code]

[code type=css]
ul#list-nav {
list-style:none;
margin:20px;
padding:0;
width:525px
}

ul#list-nav li {
display:inline
}

ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:100px;
background:#485e49;
color:#eee;
float:left;
text-align:center;
border-left:1px solid #fff;
}

ul#list-nav li a:hover {
background:#a2b3a1;
color:#000
}
[/code]

Just as with the simple menu I hope you’ve seen how is it is to create a simple navigation bar. The (x)HTML is as simple as it can be and even the CSS isn’t too complicated. By changing the CSS a little you can easily get different size bars or different colored bars. It would also be rather simple to use an image behind the links as opposed to a block of color. The power here is really in the css. Compare how easy it was to change a menu into a navigation bar with just a few minor changes and then apply a little creativity to style your own navigation bars from a basic (x)HTML list.

« »

Download a free sample from my book, Design Fundamentals.

343 comments

    • Got a stupid question. I’m rusty a bit, and I’m wondering… How can I define the width of the individual buttons? The reasoning behind this is depending the button the word is longer than others. So the ones that have a longer name I want longer, as oppose to the shorter names with a smaller button.

      Here is the current one on JSFiddle

      http://jsfiddle.net/#&togetherjs=mSPILriJL4

      Reply

      • Usually I wouldn’t define the width of buttons. I’d add some padding so there’s space around the text and then I’d let the button automatically size itself.

        If you do need to set widths on the buttons and want to target one specifically you can add a class to that button or you could try to use an nth-child selector. A class is probably easiest.

        The downside to using a class like this is the more you do it, the less maintainable your code will be, because it relies on each button having a specific class attached to it.

        Hope that helps.

        Reply

  2. Thanks for this! I’ve been looking for navigation bar code to use on my fledgling site.

    I will add this important navigation feature soon!

    In the meantime, hope you’ll stop by – and feel free to refer others looking for expert writing services.

    Best,
    Barbara Sealock
    write-to-the-point

    Reply

  5. Thanks for the info…I am in a web programming class now and will be using this nav bar for my 1st lab. I do have a question. How would I center the nave bar on my page ussing CSS? Right now it shows to the left. Any help would be greatly appreciated.

    Thanks

    Miles

    Reply

  7. I found your website very useful and thank you so much for your info. I am doing my homepage for my website (http://www.bongdavietnam.org) and I have the same problem as Craig did. My navigation bar appears on browsers as a list instead of inline even though it appeared as inline in Dreamweaver. Could you please help me with this?

    Best,
    Duy

    Reply

  8. Thanks Duy. I think the problem you’re having is a simple one. It looks like your css file isn’t linked correctly. At the end of your link tag you have this:

    type=”text/css MEDIA=screen”

    Change it to:

    type=”text/css” media=”screen”

    and I think you’ll find your navigation bar will work.

    Reply

    • I’m not sure what you mean by the links and profile still appearing. Is your page online? if so do you mind posting a link to it so I can take a look? I’ll be happy to help if I can.

      Reply

  11. ahm, what i means is that i want my About Me, Blogroll, and others to be organized using the navigation menu. I tried your codes here and it looks good. but my problem is that my About Me and Blogroll still appears in my page though i already have the navigation menu. What will i do? I will highly appreciate ur help. Pls pls teach me how.

    Reply

    • I understand now. The navigation bar here wasn’t really written for WordPress or any specific CMS for that matter. It’s meant as a simple thing for a static site.

      You can use the basic ideas and incorporate it into your CMS. I’m essentially using similar code to what I have in this post on the site right now, which is running on WordPress.

      You’ll have to look where the extra About Me and Blogroll links are appearing and remove the code that’s showing them. The details will depend on the type of CMS you’re using (I’m guessing WordPress) and how your specific site has been set up. I couldn’t really give specifics how without being able to see the files, since there’s more than one way the code could be there.

      Reply

  12. hi..i am using blogger. so if i delete the codes of About Me and Blogroll in the html section of the template they will not appear in my page but in the navigation menu instead? tnx for d reply steve.

    Reply

    • I’ve never worked with Blogger so I can’t say for certain, but I think I can guess a little at how it’s put together.

      I would think there’s a line or two of code to display the About Me page and the Blogroll. My guess is that the same line(s) of code can be used anywhere in the template so removing them from where you don’t want to see them and adding them into the navigational menu should be right.

      But to be on the safe side make a copy of the template or at least the lines of code you remove so you can put things back just in case.

      I’m happy to try to help even if all I can do is guess a little.

      Reply

    • I hope everything works. Let me know if you have any more problems. I’m not sure how much help I can be since I don’t know Blogger well, but if I can point you in the right direction I will.

      Reply

  14. Okay, I started learning HTML today and I’m just messing around, and this might be a stupid question but whatever…

    I have the beginning navigation things that have the bullets and is a list, but when you start talking about changing the style, where do u put those codes or whatever?

    Reply

    • There are different ways to style html elements. The preferred method is to use css. You can include css inline (directly in the html element), in the head section of the html document itself, or by linking to an external style sheet.

      External style sheets are really the best method.

      Here’s a really good beginner css tutorial from W3Schools. If you click the Home link at the top of the menu on the left you can also find tutorials on html, javascript, and most any other technology you would use building a website.

      CSS isn’t really any harder to learn than html. Using it to layout a site can take some time and practice and is something of an art, but things like making an item in a list a certain color are fairly easy.

      Reply

  15. I think this code would be useful for me. I have a lot to learn though. I have questions about how to be able to place navbar code on a page and then then to have it appear on all my site pages w/out having to copy and past the code individually. I mean, if I have to do that it could get to be a very time-consuming process.

    Reply

    • Julie what you’ll want to do is use an include statement. It’s something I should write a post about. You can include other files into your page with any server side language. My choice is to use PHP.

      The basic idea is that the code for your navigation would be located in one file and then each of your pages would use PHP (or again any server side language) to include that file on the page.

      The first thing to do is decide what programming language you want to use and gain some familiarity with using it. Includes are fairly easy and you don’t need to know too much in order to use them.

      I’ll put writing a tutorial about includes on my list for a future post.

      Reply

      • Yeah, I was wondering about that. I was thinking perhaps I would use PHP or Javascript. I realize it would involve making a master page and then including a link to that master page into each web page. Then when I update my navbar It automatically changes when I add new pages right?

        BTW, I will be looking for that new post you are going to do regarding this. Please inform me as to the link of it when you do. I would greatly appreciate it.

        Reply

  16. Hey, this is a pretty impressive tutorial – I found it through google 😉

    My querie is this:

    I am playing around with a few layouts for websites which I will eventually use for my course, and with your Navbar, I was thinking about placing it in the center of the web page. Now I have done the, but it is off center due to the float command aligning it slightly to the left. Removing this command, or changing it to ‘right’ doesnt not give out the desired effect without changing the appearance of the cells themselves.

    Any help on moving this bar dead center in my page would be a great help, thanks 🙂

    Reply

    • Thanks Dan.

      Try changing margin:20px to margin: 20px auto on ul#list-nav.

      You can change the 20px to whatever suits your needs too. That’s usually how I center things in css. If it still doesn’t work try wrapping the list with a div or some other element and try centering that wrapper div.

      The key is making sure the margin is set to auto for the left and right and also specifying a width on the element. You also need a proper doctype for IE.

      I wrote a post on centering with css with more details.

      If you still can’t get it to work let me know and send me a link to the page if it’s online so I can take a look.

      Reply

  17. Thanks for this great post! Browser Compliance Question – Is this code compatible with most browsers? How far back might it work with IE versions? Thanks

    Reply

    • Thanks Chris. I haven’t tested it in all browsers, but it should work with the most common. I did test with Firefox and IE (I think version 6) when I wrote the post. It should work fine in IE7, Safari and Opera as well, though again I haven’t thoroughly tested it.

      I would think you could safely go back to IE 5.5 with the code.

      And no matter what browser you use you’ll likely need to tweak things a little to suit your site.

      Hope that helps.

      Reply

    • is it online somewhere and could you offer a link to where it can be seen? Hard to know what might be wrong without seeing what you’ve done.

      Have you saved the page as .html or .htm?

      It’s also possible you missed something in the code like an opening or closing tag, or maybe added the code above inside another tag, causing the browser to interpret your code as text it should be displaying instead of interpreting.

      If I could see the code you’re using it would help. If it’s not online you can email me (info [at] vanseodesign.com)

      Reply

  19. well i just tried your example navigation bar above “complete navigation bar”… is that example the complete or needed to be closed??

    Reply

    • Oh I think I know what the problem is. The code above works, but it still needs to be inside the usual html necessary for a page.

      Have a look at the code on this page. Add the code above somewhere between the two body tags and save your file with a .html extension. The navigation should work then.

      Reply

    • I’ll need to see the code you’re using. There’s really no way for me to know what could be wrong without seeing it.

      If you want to email me your file I’ll be happy to take a look. It probably won’t be till later today or tomorrow as I’m on my way out in a few minutes, but I will definitely look for you.

      Reply

    • Now that I see the code I see the problem.

      First it doesn’t look like you copied the html into your page. You need to place the block of code starting with < ul id="list-nav" > and ending with < /ul > in between the two body tags in your file.

      The code you did copy in there is the css. Ideally your css would be in a separate file, but you can place it in inside the head section of your file. You also need to let the browser know it’s css:

      < style type="text/css" >
      place css code here
      < /style >

      You’ll need to remove the spaces around the < and > above. Place all the css in between the style tags and make sure the css is inside the head section of your document.

      And remember to add the html inside the body tags.

      Here’s a link to W3Schools that will show you the different ways to add css.

      Hopefully that works for you, but if not feel free to let me know.

      Reply

  23. So I dont know whats going on…but this is not working for me at all..I even tried using an external stylesheet. Im not new to this stuff either. I have dont a few nav bars myself. I just keep getting the ul on the webpage.

    Reply

      • The other day when I posted about it not working, I was on my pc…just tried it on my Mac today and it worked…weird. But thanks for your reply.

        I did have another question. When we have nav bars that have the float left, how can we center it in the webpage also? In my case I have all my content in a div #container with a width of 800px and centered in the web page, but I want the nav bar to be centered as well. Any suggestions?

        Reply

        • Weird. I’m not sure why it would work on your Mac, but not your PC. Glad it;s working though.

          For the centering try centering the outermost container of the nav bar. In my example I have an id of list-nav on the unordered list.

          If you scroll up through the comments I linked to another post on centering elements with css. The basic idea is to give an element a width and then set the left and right margins to auto. Your code might be:

          list-nav {width: 525px; margin: 0 auto}

          The width of course is up to you as is the top and bottom margins. The code above should center the entire bar, but if you have any problems let me know.

          Reply

          • Ok great! I got it now…I have the width at 800px instead of 525px for some reason. The 800px was causing it to be aligned left. Thanks so much for your help!

          • Glad it’s working. Remember the 525px was just arbitrary. There’s nothing magical about the number. You can change it, though you might also have to change some of the other widths in the code too.

  25. Okay, this code sounds simple and helpful enough. I am just wondering if when I place this code on just one of my web pages that it would automatically appear on another?

    If not, am I supposed to refer to some type of XHTML file to make that happen? Or do I need to use Javascript instead??

    Reply

    • Nope. If you place this code on one page it’ll only show on that page. There are ways to develop your site though so you’d only need to add the code to one file.

      I use php includes. I could then create a header.php file which would include the navigation bar. Then on every page of the site instead of adding the actual code for the header you’d add a line of code to include the header.php file.

      You don’t have to use php, but it’s the server side language I use. You could also use a content management system which takes the same idea further.

      Reply

  26. Hi,

    Great navbar, simple and easy to use.

    Any idea on how to center it vertically within a frame? Right now I’m brute-forcing it by setting the frame to a fixed size and adjusting the top margin.

    Thanks,
    Rick.

    Reply

    • Centering vertically is a little more challenging than centering horizontally. The trick is to use positioning. You position your element (in this case the list or the containing div) and set the top to be 50% and the left to be 50%. That will center your top-left corner in the center.

      Then you want to use negative margins to pull it back. So you’ll use a negative margin-top equal to half the height of what you want to center and a negative margin-left equal to half the width of what you’re trying to center.

      That’s been the most common way, but here’s a post from the Theme Forrest blog with a few other ways to vertically center with css

      Reply

  27. Hi, thanks for putting the time in to all of us. My question is I’m trying to make the bar span the whole page without a fixed width. Is there a simple way I’m missing?

    Reply

    • Lee it depends a little on what you want to do. Sometimes I want to have the bar itself stretch across the page, but still have the links occupy a fixed with in the middle. In those cases I’ll wrap a div around the menu and just let that have a width of 100% and give it the same background color as the menu.

      Then the menu code is pretty much the same as you see here, except that I’ll center the menu by giving it a left and right margin of auto.

      If you want the links to stretch across the window you’ll have to control the spacing with the left and right padding and remove all the widths in the css I presented. You’ll probably want to set the ul to width: 100% (It will probably default there if you don’t specify it) and then remove the width from the links.

      You’ll be able to control where the links sit in relation to each other using left and right padding.

      I hope that helps.

      Reply

  28. I’m building a website and I want my navigation bar to stretch all the way across the page. Right now it is set at about 700pixels.

    You can view it here: http://clientxt.com/alecstory

    I’m looking for an easy html command that will stretch the nav bar across the page for all browser sizes.

    And I’d like to keep the links where the are in the page marginally and just extend the silver bar out to the sides.

    Please help.

    Thanks a lot,
    Alec

    Reply

    • Alec what I usually do in your situation is wrap a div around the menu. Let that menu have a width of 100% so that it can stretch the entire width of the page and give it a background color to match the one you used on the menu.

      That will work depending on the rest of your code. You do have to develop in a way to allow some elements to stretch the entire width of the page so if you’ve added a wrapper around everything and set it to a certain width the above won’t work on its own.

      Reply

    • In that case you want to set a background image on the div that wraps the navigation bar and set it to repeat-x. The code would look like this:

      background:url(“path-to-graident-image.jpg”) repeat-x;

      You might also want to use the same gradient as the background on the navigation bar itself, though that depends on your design.

      The background image doesn’t need to be very wide. I think the one I’m using is 10px or 20px wide. That’s where the repeat-x comes in.

      Reply

  30. Wow what a help! I’ve been scouring trying to figure out how to do this and I really appreciate your quick help. I’ll let you know in a few days how it goes.

    Thanks again!

    Reply

    • Chari if you can point me to the page you’re working on I can take a look and see if I notice anything. If your navbar looks like the first example then in all likelihood it means your css is not set up correctly.

      Are you trying to set your css in an external file? If so check to see if you’ve linked to it correctly? If you’re including the css in the same file as the html did you include the css in the head section of your document?

      Hard to help without seeing the code, but based on your description it sounds like your page isn’t seeing your css code.

      Reply

    • I’ll need to see the code you’re using if you want me to help. Is the page you’re working on somewhere online? If so can you post a link to the page?

      When you tried an external file what code did you use to link to your external file?

      When you tried it internally where did you place your css in the file and did you remember to use style tags?

      Reply

  35. I can’t figure out how to add the repeating background image to the navbar image.

    I’m using an image for the nav bar (and in the code the first image is a logo placed above the navbar image) and I’m trying to use another image to wrap the nav bar so that it extends across the entire width of the screen.

    Here’s my code:

    The image url is something like: images/navwrap.png

    Thanks for your help,
    Alec

    Reply

    • Sorry I didn’t get back to you sooner Alec. I did get your email by the way.

      What I would do is wrap a div around the list for the navigation and then set your background image on that div in your css and have it repeat-x.

      <div>
      html for list here
      <div>

      The div may need more styling in order to have it extend the width of the screen if your entire page is set up to be a fixed width. If your entire page is set up to stretch the entire width of the screen you should be fine, but if your page is set for a fixed width you may need to rethink it a little.

      You could move the id I used on the list here to the div and then update the css accordingly or you could give the div a new class or id.

      Let me know if that works and if not I’ll take a longer look through the code you emailed and see if I can figure it out. Sorry again it took me so long to respond.

      Reply

  36. I tried to post code but couldn’t. So basically I have an image that I want to have wrapped horizontally with another image.

    What code do I use to wrap that image?

    Thanks,

    Alec

    Reply

    • Erica I think you’re asking about named anchors. What you want to do is add an id to the element you want to navigate to:

      <div id=”anchor”>

      and then link to it by adding #anchor to the end of your link.

      href=”domain.com/index.html#anchor”

      If that doesn’t make sense do a search for named anchors. There’s plenty of information out there.

      Reply

  39. Please help, I like the design of the navigation bar but when I copy and paste the code into my home page it doesnt work. The code shows up on the site like it is text. What am I doing wrong?

    Reply

    • I’d have to see the page to know, but I’m thinking it’s one of a couple of things.

      1. It’s possible when you copied the code here the quotes were real quotes and not the quotes you type on your keyboard. That will throw things off a little.

      2. Did you paste the css right below the html or did you include between style tags in the header of the file or include it as an external file.

      The second one is probably what’s happening. If you want to email me all the code for the page or send me a link to the page I’ll be happy to take a look.

      Reply

      • thank you so much for the information here – it was very helpful! I have one quick question, you mention that it’s easy enough to remove the border from the leftmost link if it’s an issue but I can’t figure out how to do that. can you help me out with that one?

        Reply

        • Marie, what you want to do is add a class or id to the leftmost list-item. It’s probably your home page link so let’s call it home

          id=”home”

          Then use css to style the link

          ul#list-nav li#home a {border-left: 0}

          That should work.

          Reply

  40. Very nice and simple navigation. Is it possible to have one of the menu items expand to a child menu with another set of items?

    Reply

    • It is possible. I show the html you would need to use in this post on WordPress dropdown menus. The post specifically talks about how to produce the html through WordPress, but you could also just use the html in a non WordPress site.

      I don’t mention the css you would use in that post, but there are two links at the top pointing you to articles that show you how to style the html. I use the suckerfish system myself.

      In time I will post something here showing how to create a drop down navigation bar. I was wanting to have it be a screen cast, but I’m still experimenting with how to screen cast.

      Reply

  41. I just wanted to thank you for posting this. By reading your help to other people in the comments, I was able to add something new to my project. Thanks for helping me build my knowledge base!

    Reply

  43. I would like to resize the navigation bar, the code is not calling out any places for changes in height for the bar. Is there more detailed code that can be inserted.

    I am using Wordpress Kubrick Template

    Thanks
    Nice,easy and fast installation of a nav bar.

    Reply

    • Mike the height is being controlled by the font-size of the text in the links and the padding on ul#list-nav li a

      You’ll see padding 5px 0 on ul#list-nav li a. You can reduce the 5px (which is top and bottom padding) and also reduce the font-size. You can probably set the font-size on ul#list-nav.

      Hope that helps. Let me know if it doesn’t.

      Reply

  44. I am trying to get the Navigation Bar HTML codes from my website. I have tried Dreamweaver and Expression Web. The only HTML Codes that I get are the main body of my website. It doesnt retrieve the navigation bar html codes and the header html codes. My website address is http://www.homeloantulsaok.com Im not sure if I am doing it correctly. If you have any suggestions I would greatly appreciate it.

    Reply

    • Beau, the navigation on your site was created using Flash so there isn’t any html code to get. It’s not you. It’s the way the site was developed.

      For a variety of reasons it’s best not to use Flash for navigation. Do you have direct access to the files used to create the site or are you using some kind of content management system or templating system that only lets you change things through your browser?

      It sounds like you do have access, but I’m not sure. Ideally you’d replace the Flash being used for the navigation with html like I have here. It might require more than just swapping one for the other though. Your site may need to be recoded in other ways to allow for the change as the overall layout could be affected.

      Reply

  45. Steven,

    I’m about 1/2 way there using your tutorial…but need some help getting to the finish line. Can I email you what I see?

    Basically I’ve gotten my list of 6 menu items looking like a horizontal nax bar, which is great. But I can’t figure out how to modify the widths of each one so that the text all falls on only one line (longer link titles are currently wrapping to 2 or 3 lines). I don’t need the width of each link to be uniform with the next. And I am also still having trouble figuring out how to make the bar span across the entire page, even after trying all of your suggestions above…

    Reply

  47. Hi Steven,

    Another question has arisen, related to Marie’s question above dated 2009-12-20.

    I’ve added a border to the top and bottom of my navigation bar, but need to get that same border on the left of the first list item, and to the right of the last list item. I’ve read your response to Marie above, and I think my issue is that I’m not sure how to add an id tag, or where exactly to add the id tag.

    Can you help?

    My specific example is that my first list item is titled “In The News”. The code I’ve added to html to add a red border to the left side of the “In The News” box is

    ul#list-nav li#In The News a {border-left: 4px solid #cc0000}

    But nothing is happening, which makes me think I’ve not done the tag correctly…

    Reply

    • Jamie sorry I didn’t see your earlier question in time, but I’m glad you were able to figure it out on your own.

      As far as adding the borders to the left and right, if you used the code in the post you should already have a border on the left side of each link. In the css for:

      ul#list-nav li a

      you’ll see border-left:1px solid #fff which should give each link a 1px white border on the left. That means you should still need to add a right border to the last link in your list.

      Using my code above the last item in the list is:

      <li id=”last”><a href=”#”>Contact</a><</li> You can see I added id="last" to <li> Last probably isn't the best name for the id, but it works. Make sure you don't have any spaces in the id name. Now we need to style it. We know we want to add border-right: 1px solid #fff in order to get a 1px white border on the right. The question is where to add it in the css. We added the left border to ul#list-nav li a. We only want to add the right border where the li has an id of last so we get: ul#list-nav li#last a {border-right: 1px solid #fff} That should style only the one link instead of all of them. Naturally if if was the left border and not the right border you would need to switch all my mentions of right for left and add the id on the appropriate link. In your css above the issue is all the spaces in li#in the news. Let me know if that works. If it doesn't post a link or feel free to send it to me via the contact form and I'll be happy to take a look.

      Reply

      • Thanks! I sent you the info a couple of days ago through the contact form. I don’t know why I can’t figure this out, it seems as if it should be simple. But I’m a newbie….

        Reply

    • If I’m understanding right you just need to wrap the code for your image with the tag for a link. It would look something like this

      <a href=”the-url”><img src=”path-to-image” /></a>

      Reply

  49. I am trying to create the above menu in my blog but I dont get it right. The menu has many levels, like 4. How do you (using the above code) create that menu for 4 levels. this is a word press blog. The munu is created from the word press pages.

    Thanks

    Reply

  50. I am trying to create the above menu in my blog but I dont get it right. The menu has many levels, like 4. How do you (using the above code) create that menu for 4 levels. this is a word press blog. The menu is created from the word press pages.

    Thanks

    Reply

    • Ernest the code in this post is meant to be used for a single level navigation bar. It can serve as the beginning of a multi-level navigation bar, but not as is.

      I use the suckerfish system for creating multi-level drop downs. One of these days I’ll get around to writing a post here for creating multi-level drop downs that I keep promising people.

      Reply

  51. hi..i am using blogger. so if i delete the codes of About Me and Blogroll in the html section of the template they will not appear in my page but in the navigation menu instead? tnx for d reply steve.

    Reply

    • I’ve never used Blogger so I’m not really sure how things work as far as the code.

      It would depend on what you’re deleting I think. Assuming you want to remove those links from your navigation see if you can find some code that gets included on every page of your blog and remove the links in that code.

      I hope that helps.

      Reply

    • It’s been a long time since I worked in DreamWeaver, but there should be a code view in DreamWeaver and you should be able to add the code directly that way.

      Just make sure the html goes in with the html and the css goes in with the css.

      Reply

  53. I have a regular HTML website. I have added a BLOG page to it and I am using the default Kubrick Wordpress page. I have successfully deleted the header and other not needed trim on the blog. Question: How do I take my navigation button code and place it in the brown area above the blog section? What Wordpress file do I put it in? Can I use the same css statements into the Wordpress style.css and then put the Html in to the WP index.php before it has the CMS code? My navigation buttons are just the static buttons, but I need to get them on the page.
    Thanks. Rick

    Reply

    • It depends on exactly where you want the navigation, but the likely file is header.php. That’s usually where you’ll see most horizontal navigation bar code. I’m pretty sure you can add the code at the end of Kubrick’s header.php. If it doesn’t work at the very end of the file it might need to go inside the last closing div tag in the file.

      You should be able to add the css statements to the theme’s style.css as long as you’re still linking to that file in header.php. It’s possible there could be a conflict if what you’re styling has already been styled somewhere else in the css.

      For example if you create a ul with an id of nav and the existing css file already styles ul#nav, you may need to remove or modify the existing statements or you would change your navigation to be ul id=”navigation” or something unique and adjust your css to match.

      Reply

  54. I am trying to get the HTML Code for the navigation bar in my website. I am wanting to post the HTML Code on Craigslist, but when I get the HTML Code, it only has the body of my web page, and leaves out the navigation bar and the top of my website. Not sure what to do. Any help would be greatly appreciated.

    Reply

    • Beau, I’m not entirely following what you’re trying to do. Is the issue that you can’t post the html on Craig’s List? You may not be able to add anything you want to a Craig’s List post. I’m sure they limit the code you can use.

      Is everything working fine on your site or are you having trouble incorporating the code here to your site?

      Reply

  56. Hello,

    im creating a new html site..and i wonder how i get the css code to work in my html document? i use dreamweaver. thank you

    Reply

    • It’s been years since I used DreamWeaver, but I think there’s a code view where you can add the css directly.

      Ideally you want to include all your css in an external stylesheet, which you would then link to from the header of your pages. I’m not sure how you specifically do that in DreamWeaver, but I’m sure it’s possible.

      I would also think any intro book or tutorial on DreamWeaver will cover it as well.

      Reply

  57. Hi Steven,
    I am finding your site very helpful. I am building a site with drupal and am trying to get my navigation menus to span the width of the page. I see you have helped some people do the same thing, but I cannot seem to get mine to work. I am new to css and html- but have some basic knowledge. Would you mind looking at my website and letting me know what I am doing wrong?? You can find it at http://www.peptastic.com
    Thanks!
    Cassandra

    Reply

  60. Hi Steven,
    I discovered your site yesterday after searching for information on HTML stacking. You have a wealth of great material here, great job. I am in the midst of building a new site using a CMS and EZ-CSS. I am making slow but steady progress.

    My question is how would you extend your navigation bar so that it highlighted the current link (page). ie. Give visual feedback to what page the user is on.

    I do see an issue with such highlighting though and that is what do you do when the current page isn’t one that is included in the navigation bar. Any thoughts?

    Neville

    Reply

    • Thanks Neville. Appreciate the kind words.

      The basic idea is to add a hook (class or id) to the element you want highlighted and then style it differently only when on that page. The issue is making sure the style is only visible on the page you want highlighted.

      You can either add a class dynamically. Maybe you run a conditional statement in php to determine if the current page matches the link and then add a class. Or you can only add the style on that page in the head section for example.

      The latter is easier to do, though not as flexible. You would add an id to each navigational element. For example in the code here you might do something like this for the link to the about page

      <li id=”about”><a href=”#” rel=”nofollow”>About Us</a></li>

      and then you could add your style in the head section of the about page only. You would do the same for the other links.

      The better and more flexible approach is to dynamically add a class (class=”current-page”) and have that class styled once in your css file.

      If you use WordPress that class is dynamically added for you, which makes it very easy. Here’s a post on highlighting the current WordPress page

      Reply

  61. Thanks man for your nice tutorial.
    However my blog just showing a summary of the post then to see the whole post you click (Full Story) but the problem it opens in the same page.
    I would like to have it opens in new tab or window.
    This is the (HTML) code :
    (


    Full Story
    )
    Your assistance will be highly appreciated.

    Reply

    • Hi Bazooka. Thanks for the compliments on the tutorial.

      In all honesty I think you’re better letting the new page load in the same tab or window instead of forcing a new one on your users. Anyone who wants to open the page in a new tab or window can easily do so on their own.

      However if you must the easiest way is to just add target=”blank” as an attribute on the link. The target attribute has been deprecated so it won’t be valid code, but it will work.

      A more valid solution would be to use rel=”external” as the attribute on the link and then write some javascript to open links with rel=”external” as a new window.

      The first solution while no longer valid html is still commonly used.

      Reply

    • Glad I could help Liang. Your understanding of css will come if you keep at it. Try to learn one new thing about css on every site you develop. After a few sites you can look back at all you know.

      Reply

  63. I am still learning to get my site working using Thesis Theme. Thesis requires some heavy expertise in CSS, after reading your tutorial i managed to get the Navigation bar working on my new site.

    Reply

    • I’m glad I helped you get your navigation bar working, though I also think you could do better than the Thesis theme. It’s not one I ever recommend, since I think there are far better themes and theme developers in the WordPress community.

      Reply

    • If you’re asking about a page that’s online do you mind post a link or emailing it to me. If it’s not online feel free to email me the code. I’ll be happy to take a look when I have a chance, though I’ll likely need to see your code to really be able to help.

      Reply

  66. Hello! What a WONDERFUL and generous resource you have here, thank you very much!!

    I appear to have the same problem as some others except that I have a web site to show it:

    http://www.aslforparents.com/

    Keep in mind that I am an utter complete NEWBIE! A motivated one, but a newbie nonetheless. I directly copied/pasted the exact same code, and well, you can see the explosion I got. =)

    Thanks in advance!

    Reply

    • Hi Nathan. I’m glad you got the navigation working. The way I usually stretch the navigation across the screen is to wrap a div around the ul. You’ll have to give the div a height to match the ul and you want to give it the same background color. I don’t think you need to add a width to the new wrapper div, but if you do use 100%.

      Let me know if you can make that work. If not feel free to comment again or send me a message though the contact form and I’ll be happy to take a look.

      The basic idea again is not to do anything with the ul itself, but to wrap it with a div that has the same background color and height. The div stretches across the screen, but no one knows the difference.

      Reply

  68. Hi,
    Great tutorial, I used your tutorial to create the following navigation bar. However, when the web page is reduced at one point the last link “offers” is cut and drops to the next line which is not what I want. I want the navigation bar to stay as one line whether the page is maximized or minimized. How can this be achieved? Sorry for sending the following code but I am unable to deploy the page to the server at the moment, because of problems with the server. I will be grateful for your help.
    [code]

    body
    { font-family:arial;
    text-align:center;
    min-width:956px;
    margin: 0px 0px;
    padding: 0px;
    }
    #wrapper
    { position:relative;
    text-align:left;
    width: 956px;
    height: 100%;
    margin: 0 auto;
    }
    ul#frstList
    { list-style-type:none;
    margin:0;
    padding:0;
    font-size:12px;
    font-family:Tahoma;
    }
    ul#frstList li
    { display:inline;
    }
    ul#frstList li a
    { text-decoration:none;
    color:#000000;
    }
    ul#frstList li a:hover
    { text-decoration:underline;
    color:#000000;
    }
    ul#thrdList
    { list-style-type:none;
    margin:0;
    padding:0;
    width:956px;
    font-size:13px;
    font-weight:bold;
    white-space:nowrap;
    }
    ul#thrdList li
    { display:inline;
    }
    ul#thrdList li a
    { text-decoration:none;
    padding:5px 0;
    width:100px;
    background:#000000;
    color:#FFFFFF;
    float:left;
    text-align:center;
    border-left:1px solid #fff;
    }
    ul#thrdList li a:hover
    { background:#ADFF2F;
    color:#000000;
    }
    p
    { font-size:12px;
    font-family:Tahoma;
    font-weight:bold;
    }

    Homepage
     · Store Finder
     · Help
     · Wish List
     · Quick Order
     · XYZ Money
     · My Account

    Search in

    All departments
    Women
    Men
    Kids
    Home & Furniture
    Technology
    Flowers & Gifts
    Food & Wine

    for


    Existing User? Sign In
      ·  New User? 
    Register


    My Basket:
     0 Items

    Christmas Shop
    Women
    Men
    Kids
    Shoes
    Home & Furniture
    Technology
    Flowers & Gifts
    Food & Wine
    XYZ TV
    Offers

    [/code]

    Reply

    • Hi Ray,

      No worries about the code. WordPress turned your html into live code though so I have to guess a little about exactly how it’s set up. Feel free to email me or use the contact form up and to the right.

      There’s a limit to how many main navigation links you can use. I think if you set a width on the ul it’ll force the whole bar to remain whatever size you set it to. However that means you’ll get a horizontal scroll bar when the browser gets too small.

      What you really want to do is limit how many links are in the navigation bar. If they become too many you may want to either use a vertical system or think about whether some could be moved to subnavigation.

      What I would do is see how many links fit with the browser as narrow as acceptable (probably 760px) and see if you can limit the number of links to as many as will show at that width.

      You could also try removing the width on:

      ul#thrdList li a

      You’ll want to add a few px of left and right padding on it if you do. The menu items won’t be the same width any more, but then those that have less text will be allowed to shrink a little and you’ll be able to fit more in overall. The problem will still be there, but it won’t happen till the browser gets a little smaller.

      Hopefully that helps. Again feel free to email me the code.

      Reply

  69. Good morning,

    i’m trying to get along with css etcetera, but only the links are working well for me; rest of this page isn’t working.

    in which sheet of my code do i need to paste these:
    ul#list-nav {
    margin:20px;
    padding:0;
    list-style:none;
    width:525px;
    }

    from here it isn’t clear for me.

    Thanks in advance!

    Reply

    • Hi Benjamin. The code you posted is part of the css. Ideally you would create a separate css file. The common name is style.css and I usually place it inside a folder with the name css.

      Then you use the html link tag to reference the style.css file.

      Here’s a quick tutorial on adding css from W3Schools. The external method is the ideal way to add css.

      I think that tutorial will help answer your question. If not feel free to ask again here and I’ll try to help more.

      Reply

  70. Hi, I just stumbled across this tutorial since I’ve been trying to work on a navigation bar for my blog. Thanks so much- it’s really helpful! It works on my blog, I just have a question- it’s probably really stupid and easy, but I can’t figure it out!

    Is there a code for changing the font?

    That’s it. Thanks!

    Reply

  71. Hi!

    Thank you for this excellent and generous tutorial. I’ve been following along on a similar CSS layout tutorial over at
    http://www.subcide.com/articles/creating-a-css-layout-from-scratch/P11/

    but the author of that tutorial was up-front about his navigation bar code being oudated (it used a defined list (1, 2, 3,…) which he urges us to avoid. So your CSS tutorial here was a nice replacement for page 11 of that tutorial.

    Hmm. Almost as if the tutorials themselves cascade!

    One caveat: Your all-at-once code is correct, so far as I can tell, but up in the first few sections, where you explain each step, you’ve got this bit:

    –begin quote–

    The key this time will be in positioning the links by floating each one left.

    UL#LIST-MENU LI A {
    text-decoration:none;
    padding:5px 0;
    width:100px;
    background:#485e49;
    color:#eee;
    float:left;
    }

    –end quote–
    caps mine. You allude to a previous lesson about vertical menus, and I suspect this bit of code is just a carry-over from that lesson.

    I really, really like your format for instruction, where you list the steps slowly, with lots of explanation, and then give us all the code at the end.

    Many thanks for all this. Once I’ve got my site refreshed so that it no longer embarrasses me, I’ll post to show where I’ve gone with your lessons.

    Reply

    • Thanks. I did write a similar post a few weeks before this one on coding a vertical menu of links. I link to it at the top of the post.

      This post is actually getting a little old as well. Everything should still work, but I code similar navbars slightly differently now than I did when I wrote this. I’ve been thinking I should update what’s here, maybe even add a screencast showing me building the navbar.

      I try to go slow through tutorials like these. It’s so easy to forget how much you know and take for granted when explaining to others. Sometimes what seems simple to the author is only simple after many attempts and years of practice. I try my best to keep that in mind so as not to skip steps.

      I’d rather someone who doesn’t need the info skip ahead a little than to lose someone who needs it.

      Reply

  72. I’m just starting to learn some of this stuff and this tutorial really helped me with the nav bar. I just can’t figure out how to center this at the bottom of the page. Could you give me a hand? Thanks Steven.

    Reply

    • Glad to help Greg. Do you mean center the nav bar horizontally?

      The basic way to center things in css is to make sure what you’re centering has a width set and then using

      margin: 0 auto

      The 0 can be any px amount and it’ll be the margin for the top and bottom. The auto will center the element inside it’s container element.

      Feel free to send me a link to the page or site in question via the contact form above and to the right. I’ll take a look when I have a chance.

      Reply

    • Jen it looks like the there’s an id of “jsddm” applied to the ul with your navigation. You need to give the ul a width and it looks like 975px will work. Then add a left and right margin of auto. The code should be:

      ul#jsddm {width: 975px; margin: 0 auto}

      I wrote a post on centering with css that explains why the above works if you want to know more.

      Hopefully the code above works for you

      Reply

    • Be careful not to have your home page too cluttered. I feel like that is one of the biggest deterrents on the web. Your navbar looks and acts great! Congrats on your hard work!

      Reply

  75. Am practicing to create menu bar using the example html code above. Am able to achieved the list nav but the styling nav bar is not working for me. I even copy what you have above but still not working. Can you please explain why this is not working for me?

    Reply

  77. Hi. Thanks for the tutorial. Can u tell me how to adapt naviagation bar link when I use one image for the whole navigation bar. thanks

    Reply

  78. Steven, thank you so much. Your code works for the concept of staying at a fixed point, but I would like the nav bar to line up as far left to the page as possible… with the new code, there is some white space because I think its centering it on the page when I would like it left aligned on the page. Here is the code for the menu. if you could email me, i would greatly appreciate it.

    /* menu styles */
    #jsddm
    { margin: 0;
    padding: 0}

    #jsddm li
    { float: left;
    list-style: none;
    font: 12px arial}

    #jsddm li a
    { display: block;
    background: #000000; /*DARK-GREEN*/
    padding: 5px 12px;
    text-decoration: none;
    border-right: 1px black;
    width: 83px;
    color: #EAFFED;
    white-space: nowrap}

    #jsddm li a:hover
    { background: #24313C}

    #jsddm li ul
    { margin: 0;
    padding: 0;
    position: absolute;
    visibility: hidden;
    border-top: 1px solid white}

    #jsddm li ul li
    { float: none;
    display: inline}

    #jsddm li ul li a
    { width: auto;
    background: #A9C251; /*LIGHT-GREEN*/
    color: #24313C}

    #jsddm li ul li a:hover
    { background: #8EA344}

    Reply

  79. Steven, I think I just figured it out.. how to get it left aligned… but your advice for putting the 975px in there to keep it fixed was perfect… thank you a million times over!!! I have been going crazy for months trying to figure it out. You are awesome!!

    Reply

  80. Everything is showing up right….I even played around with the style a little bit in terms of coloring and the backgrounds on each link….my is that when i preview it in a browser the bar displays vertically instead of horizontally…any i dea what’s going on here….thanks for this post btw it’s AMAZING!!! here’s my css:

    ul#list-nav {
    list-style:none;
    margin:20px;
    padding:0;
    width:525px;
    display: inline;
    }

    ul#list-nav li {
    display:inline;
    list-style-type: none;
    }

    ul#list-nav li a {
    text-decoration:none;
    padding:5px 0;
    width:100px;
    color:#eee;
    float:left;
    text-align:center;
    border-left:1px solid #fff;
    }

    ul#list-nav li a:hover {
    color:#00B3D1;
    font-family: Arial, Helvetica, sans-serif;
    display: inline;
    }

    Reply

    • Sorry I did reply sooner Jose. Can you post a link to the page in question if it’s online somewhere? Nothing is jumping out at me in the code.

      If you post or send me a link (or the full code of the page) I’ll take a look and see if I can tell what’s wrong.

      Reply

    • Thanks Marin. A few people have requested the same tutorial so I should probably write it.

      I use the suckerfish system to create dropdowns. If you look up a few comments I’ve linked to it. When I get a chance I will write a tutorial here though. I’ve also been meaning to update this post some so it better answers some of the other questions that have come up in the comments.

      Reply

  83. Hey Steven, I tried using your code for my navbar in a table that I’m using to layout my homepage. I put the html code in a cell, and it all works fine but there’s a big space between each list item. I’ve gone through all the padding and margins and everything, but no matter what I do, there’s still a space between each li. could u give me some advice?
    here’s my code:
    css:

    ul#list-menu {
    list-style:none;
    text-align: center;
    margin:0px;
    padding:0;
    border:solid #668265;
    border-width:2px 2px 2px 2px;
    width:100%;
    }

    ul#list-menu li a {
    text-decoration:none;
    display:block;
    border-top:2px solid #77a487;
    padding:10px;
    margin:0px;
    background:#485e49;
    color:#eee;
    }

    ul#list-menu li a:hover {
    background:#a2b3a1;
    color:#000;
    }

    html:

    Home
    About Us
    Services
    Products
    Contact

    I could send you a picture if this doesnt help.

    Reply

      • Could you email me all the code for the entire page, both html and css? I’m guessing there’s a conflict either with the table itself or with how something else on the page is styled.

        I’ll probably need to be able to load up the page in a browser to see what’s going on. I may not be able to get to it today, but I promise I’ll take a look within the next couple if you send me the code.

        Thanks.

        Reply

  85. How do I remove the white bar on the left of the navigation? Also, as everyone else, this has been very helpful. Thank you.

    Reply

    • Glad I could help Charles. The white bar is being set with

      ul#list-nav li a {border-left:1px solid #fff;}

      I’m assuming you still want it to show up in between the menu items and just have it removed from the first menu item.

      You can do that in 2 ways.

      ul#list-nav li:first-child a {border: none}

      The line above targets the first li under ul#list-nav, which is the one we’re looking for. However not all browsers understand :first-child.

      The second method is to add a class to that same li

      <li class=”home”><a href=”#”>Home</a></li>

      and then style it

      ul#list-nav li.home a {border: none}

      Hope that helps.

      Reply

    • Mike the code you tried to add didn’t quite come through so I’m not sure exactly what you’re asking. If you’re asking about the code I used in this post, then yes it’s ok with Google.

      In fact it’s exactly how search engines would like you to code navigation; plain old html links.

      Reply

  89. really good tutorial… i’m a CSS beginner and even i could do it with a little use of my brain hehehe thanks!

    Reply

  94. Question—I wrote some code and it turned out fairly okay. Problem is, say, instead of “Homepage,” I wrote a lengthier version of it that ended up creating a second line and a thicker box——and next to the shorter links right next to it shows up in an uneven way. Is there a way to manipulate the box size to that they’re all even across or do I need a shorter term. (A shorter term is not a desired option).

    Any help would be appreciated. Thanks.

    Reply

    • Sorry it took me so long to reply. If you look at my code there are a couple places where I set a width. You’ll just want to increase those widths to increase the box sizes.

      At some point there could still be a limit on increasing the width. That will depend on your layout. If you reach that point you’d probably need to rewrite the link text.

      Reply

    • Sorry I wasn’t able to respond right away Ian, but it looks like it didn’t take you long to solve things on your own.

      Oddly I often find that as soon as I ask someone for help the solution comes to me. I don’t know why, but I think the act of writing the question gets out mind to see the answer. 🙂

      Reply

  99. I love the simplicity of your nav bar and have tried it on my very simple site without any success at all. I copied all the code above into the CSS but don’t really know how to have it appear where the nav bar needs to be (just below the copy)

    I am going to pad it out to a few pages so need to be able to replicate it and SEO it.

    Do you have any advice for me?

    Thanks,
    John

    Reply

    • Give the main ul a left and right margin of auto. So

      ul#list-nav {margin:20px auto}

      That should center it on the page. If it doesn’t work fell free to email me a link to the page or the code you’re using and I’ll be happy to take a look.

      Reply

  101. Thank you so much for creating this beginner friendly page. It really helped me start to understand CSS, and I Understand HTML a little better, as well! The only question I have is how do you have a picture as the background instead? If I put the file path in the background: line, it does not work, and the color that used to be there is transparent. Do you have any Idea what I might be missing?

    Reply

    • I’m glad you found the post helpful Tyler. I might need to see the exact code your using to solve the problem. Feel free to link to it if the page in question is online. You can also email me the code.

      You can add an image as the background. Where in the code you add it depends on where you want it to show. Assuming you want to have the background image on the link itself, which is where I added the background color here you’d add

      ul#list-nav li a { background: url(“path-to-imahe”) no-repeat }

      I’m guessing at the no-repeat since it’s possible you want it to repeat in one or more directions.

      You could use background-image instead of background, but the latter should work. You can also add a background color along with the image

      ul#list-nav li a { background: #339933 url(“path-to-imahe”) no-repeat }

      The color will need to come first.

      Let me know if you can’t get it working and again feel free to send me the code.

      Reply

      • Thanks for your reply, Steven. I got the image to work, just now how I expected it to. I am going for the rounded corner look, but if I have rounded edges in the image, it is used in each link, but I only want it to have rounded edges on the corners of the navbar. Would you have any idea how to do that?

        Reply

        • Glad to help.

          You’ll want to use different images for the different links. One without rounded corners, with with the rounded on the left side, and one with the rounded on the right.

          You then assign ids to the first and last links so you can set the appropriate image on each, while all the middle links get the non-rounded image.

          Another and probably better approach is to create a sprite, which is a single image made up of all 3 images. You would include the single image as the background for all link and use the background-position property to display the correct part of the single image behind each link.

          If you do a search for css sprites there’s a lot about the technique. You still need to give the first and last links unique ids so you can target each with specific css.

          Does that make sense?

          Reply

          • The sprites make sense, but I am not sure how to get them when I have your code in there already. If you want to take a quick look at what I have, minecraft.imademyownserver.com is my temp address.

          • The page looks good so far. 🙂

            What you would need to do is replace the background image you’re currently using with the single sprite image that would be a combined left, right, and general background image.

            You’d add it to the css similar to how you have it set now, but you’d use the additional background-position property to control which part of the image is visible.

            CSS Tricks has a good tutorial

            See if it helps you get it working. If not email me the three images and the link to the page again and I’ll see if I can get it working for you.

  102. Is there a way to get the search bar and the social media icons into that nav bar? I have added one to the top of my site, but would also like to add these items.

    Thanks!

    Reply

    • I believe so, instead of (a href=””)Text(/a) you gan just stick your media in there. I had a search bar in mine for a while, but I was unable to figure out how to get it working, so I deleted it. If you get the code right, it will look and act like a charm.

      Reply

    • What Tyler said.

      You can place the code for your search form and social media icons inside one of the list elements.

      Another solution is to wrap the navbar with a container and then add your search form and icons inside the container, but outside the list of links. I’d probably use the container instead of adding things as another list item, but either can be made to work.

      Reply

  103. Hi,

    Thanks for your tutorial, it is very helpful. I am having a couple of issues, though. I am not a computer person, I feel like a complete idoit! I wanted to see if you could guide me through making the navigation bar go the width of the blog AND to get rid of the white lines inbetween the buttons. I’ve tried everything, but nothing seems to work. Help please!

    Reply

  104. I figured out how to get the white bars off. I have an idea of how to make the navigation bar longer. Is it possible to add a border around the navigation bar? I appreciate all your help

    Reply

    • Sorry I didn’t respond sooner, but glad you figured out part of your question.

      With making the navigation bar longer and the width of the blog do you want to fill it with more links or do you just want the background color to stretch from one edge to the other?

      If it’s just the background you want then wrap a div around the entire list and give it an id or class.

      <div id=”nav-wrapper”>
      <ul id=”list-nav”>
      list items
      </ul>
      </div>

      Then in your css try this

      #nav-wrapper {width: 100%; background: your-background-color}

      If you want to add more list items then you’ll need to adjust the width I added to ul#list-nav to account for the additional list items. There are also widths on ul#list-nav li a that you might adjust as well depending on the specifics of your navigation bar.

      Hope that helps.

      Reply

      • Thanks for the quick response. Where do I put the code? I already have your code for the navigation bar before }]]>

        Does that code include a border as well? I’ve been doing so much research, my brain hurts. Your instructions are the easiest to follow. Thanks again for all your help!

        Reply

        • Sorry your code didn’t come through. I removed the two follow up posts as you can see.

          If you want you can send me your code in an email. Either fill out the contact form or just grab my address from the contact page. I’ll be happy to take a look. If I can’t get to it tonight I promise I will in the next day or two.

          The new wrapping div would go right around wherever you have the current html for the navigation bar. The css would go wherever you have the rest of your html. I’d probably place it directly above the other css for the nav bar, but it could really go anywhere in your css.

          Reply

  105. That didn’t seem to work very well. I must’ve done something wrong because now it has two white spaces and the navaigation bar doesn’t go the whole span of the blog. I will send over the coding. I’m pretty sure I put everything in the wrong places.

    Reply

  107. Hey Steven, thanks a lot for your menu bar! This is just what I was looking for!
    But I have one question: is there a simple way to add drop down menu’s?

    Reply

  108. Hi Steven,
    I feel this post is really helpful. CSS is easier than using Javascript. But, I am curious about making sub-navigation bar as

    http://www.lotterywest.wa.gov.au/grants
    (The menubar on top).

    I may get menu bars ready in Javascript/JQuery, but not able to understand the code ( I am not so much master).
    I want to make my own one, not so much complicated. Can you help me to add more stuff in this navigation bar?

    Reply

  109. Steven i copied what u wrote onto my notepad under the and then opened it on the internet but the design is different its in blue
    please help

    Reply

  110. I’ve been looking at a way to build a menu for my website that doesn’t involve using Javascript because IE is nit picky with JS. no other browser has a problem enabling it by default but IE sure does.Well now that I’m done going on about that…I think your article is great I was wondering,How would I go about creating submenus under each root menu.Say I have “computer repair” as a root menu and under that I would have “Virus Repair,Data Recovery and say 2 other categories that pops up when I hover over the menu?How would that be accomplished.

    Reply

    • I use the Suckerfish system for developing drop down menus. Look up a couple of comments and you’ll see a link to the system. It’s not too hard to use. It’s mostly css and uses a small bit of Javascript for older versions of IE.

      Reply

  111. i will start by saying.. THANKS!!!!
    i did this using a long way but i tell you, this is the best i have come across in my search… Thanks again.

    Benjamin Boateng

    Reply

  114. hey, that you for the code!! the best i have seen on the net!! 10/10

    just one thing… i have more then 5 pages and when i add the 6 page it goes underneath instead of going next to the last page. Do you know what i mean? any ideas how to fix this?

    Reply

  115. Hi
    i tryed out this code but it does not want to show as
    the finished menu that you show

    i see it in IE (old version)
    but in firefox 3.6 it does not show at all..

    i typed over the code a few time and spell checked it
    even copy pasted it

    but still will not show in firefox
    and in EI it still looks not like your prefew

    i reomed all the other CSS that i had for the
    i had around the code but also no change

    i am pretty new to css so i dont know what the problem is…

    also why dont you put ; behind “width: 525px, display:inline, and color:#000”

    Reply

    • Hi jaylow. Thanks for posting the code. For some reason the navigation bar has no height. I think it’s because everything is being floated inside it. I have 2 ways to fix it.

      1. Force the ul to have a height. Add height: 40px; to ul#list-nav. I guessed at the 40px, but it looks right.

      2. Force the list’s container to show it’s content. Add overflow: hidden to #header2. This is the way I would solve it.

      Once I did that I noticed the last menu item dropping to a 2nd line. Adjusting the width of ul#list-nav to 610px made it wide enough so no menu item dropped to a 2nd line.

      I should have added the ; at the end of those lines of css. It’s isn’t necessary on the last css property: value for any selector, but it’s good practice to include the semi-colon if it’s not necessary. I wrote this post several years ago when my practice wasn’t as good as it should be.

      Try one of the 2 solutions above and see if you get things working. If not feel free to ask more questions. And no need to apologize for your English. You type better English than I could type your native language.

      Reply

  117. i added the height: 40px; and it works perfect now, thanks very much for the quick help.

    thanks for this tutorial!
    i will stay some time around to see some other tutorial/help

    the “How To Add Images To Your CSS Borders” look interesting

    anyway thanks again!

    Reply

    • Glad I could help you get it working. Don’t forget the other method (overflow: hidden) is probably the better method. If you later adjust the container around the navigation bar you’ll now have to adjust its height. With overflow: hidden it’ll happen automatically.

      Reply

  118. if some one has problems centering the menu in a header in firefox,like i had 🙂

    change in ul#listt-nav, margin:0px; to margin: 0 auto;

    Reply

  119. Hi

    i am trying to make each link have a different background colour, for example: home=pink; about=blue contact=yellow etc.

    I have added a class to the li

    <a href=”#” >Home </a>
    <a href=”#”>About Us </a >
    etc

    in the css i have written:
    ul#list-nav li.1color { background-color: #900;}
    ul#list-nav li.1color { background-color: #500;}
    and taken the background from:

    ul#list-nav li a {
    text-decoration:none;
    padding: 5px 0px 0px 0px;
    width:13%;
    height: 40px;
    /*background:#7251BC;*/
    color:#B0E7f7;
    float:left;
    text-align:center;
    border-right:5px solid #fff;
    }

    but for some reason this will not work. Are you able to suggest anything please?

    Many thanks in advance

    Reply

    • sorry the links showed up rather than the code

      <li class=”1color”><a href=”#”>Home</a><a href=”#” rel=”nofollow”>About Us</a></li>

      Reply

    • Beth from what I can see in your code it looks like you’re giving each list item the same class. Each would need a unique class.

      class=”home”
      class=”about”
      etc.

      Then in your css you could style things

      .home {background-color: #900;}
      .about {background-color: #500;}

      If they all have the same class names then which ever style comes last in your css file will be the one used for all the list items.

      I hope that makes sense.

      Reply

    • You’ll probably have to change the measurements to be relative (% or ’em’) instead of using ‘px’ as I did here. Looking at your image you’ll need to do the same for the overall container wrapping your page.

      Reply

  122. Thank you Steven for this, But how I can do the same code so it makes every button when visiting the page will have different color than the other buttons, I think it should have “span” code.

    Best Regards

    Reply

    • Hi Khalil. There are different ways you could set this up. It depends on your html. Usually I’d add classes to the buttons where you want a different color, and then set a different color for that class.

      I’d probably add the class to the list-item, though you could also add it on the link or even on the entire list. You could add a span and style it, but I think you’re better off using classes on the html you already have set up.

      Hope that helps.

      Reply

  123. here is my css code for:

    div.nav-menu {
    list-style:none;
    margin-top:120px;
    margin-left:44px;
    padding:0;
    width:950px;
    }

    div.nav-menu li {
    display:inline;
    }

    div.nav-menu li a {
    text-decoration:none;
    padding:10px 0;
    width:110.5px;
    background-color:#F9A22D;
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FBB03B, endColorstr=#F7931E);
    background-image:-moz-linear-gradient(top, #FBB03B 0%, #F9A22D 25%,#F7931E 100%);
    background-image:linear-gradient(top, #FBB03B 0%, #F9A22D 25%,#F7931E 100%);
    background-image:-webkit-linear-gradient(top, #FBB03B 0%, #F9A22D 25%,#F7931E 100%);
    background-image:-o-linear-gradient(top, #FBB03B 0%, #F9A22D 25%,#F7931E 100%);
    background-image:-ms-linear-gradient(top, #FBB03B 0%, #F9A22D 25%,#F7931E 100%);
    background-image:-webkit-gradient(linear, right top, right bottom, color-stop(0%,#FBB03B), color-stop(25%,#F9A22D),color-stop(100%,#F7931E));
    color:#eee;
    float:left;
    text-align:center;
    border-right:1px solid #fff;
    border-radius: 7px 7px 7px 7px;
    }

    div.nav-menu li a:hover {
    background-color:#F9A22D;
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FBB03B, endColorstr=#F15A24);
    background-image:-moz-linear-gradient(top, #FBB03B 0%, #F9A22D 25%,#F15A24 100%);
    background-image:linear-gradient(top, #FBB03B 0%, #F9A22D 25%,#F15A24 100%);
    background-image:-webkit-linear-gradient(top, #FBB03B 0%, #F9A22D 25%,#F15A24 100%);
    background-image:-o-linear-gradient(top, #FBB03B 0%, #F9A22D 25%,#F15A24 100%);
    background-image:-ms-linear-gradient(top, #FBB03B 0%, #F9A22D 25%,#F15A24 100%);
    background-image:-webkit-gradient(linear, right top, right bottom, color-stop(0%,#FBB03B), color-stop(25%,#F9A22D),color-stop(100%,#F15A24));
    color:#000
    }

    and here my html code:

    Home
    About us
    Location
    Articles
    About us
    Home
    Location
    Articles

    I don’t know where to make selected state, please help me.

    Reply

  127. i have added the text i need and because its to long i has extended down one box so is there away to make the boxes longer

    Reply

    • Yep. You just need to adjust the widths I used. There’s one on the ul#list-nav, which sets the overall width of the entire navbar and then there’s one on ul#list-nav li a, which sets the width on the individual menu items.

      You’ll probably need to adjust both and I think it will be easier to start by increasing ul#list-nav and then increasing ul#list-nav li a.

      Hope that helps.

      Reply

    • Hi Frank. I’m working on a new post to do just that. In the meantime you can use the suckerfish system which is the one I usually use. I’ve linked to it a half dozen or so times in the comments so just do a search on this page for suckerfish. It should be easy to find.

      Reply

  129. I’ve tried your code and noticed an odd side effect when it follows a url. What I have is a PERL/CGI script which creates a webpage with the nav bar on it. My intention was to create the effect of a stationary and ever present nav bar as users navigate the links. The base url for all links are the same directing it back to the original CGI script, but the page changes it’s appearance based on additional parameters stipulated in the link.

    For example:

    Home = http://server.com/bin/script.cgi
    Page 1 = http://server.com/bin/script.cgi?page=1

    and etc..

    The same nav bar code is reloaded everytime a link is clicked. But the funny thing is when following a URL the nav bar breaks up and forms a stair step from left to right. Refreshing the page will put the nav bar back into it’s appropriate orientation, using anchors to navigate within the same page seems to work fine, but put a url into and the nav bar breaks apart the next time it’s loaded.

    Do you have any thoughts concerning that? Thanks.

    Reply

    • I’m thinking the problem is more with the cgi script than the code here. Is there a reason why you’re using the cgi script. They went out of practice quite some time ago.

      If you want the navbar to remain in place you can do that with some css. Give the outermost container on the navbar a position of fixed and it should remain in place.

      Using the code here you could add

      #list-nav {position: fixed}

      Reply

  131. Emm I don’t understand a lot, I have an .html with Bootstrap Twitter, I want to change the black navigation bar, what I have to do?

    Reply

  132. I’ve added a vertical nav bar to my site but now I’m having problems putting content to the right of the nav bar.

    Everytime I try the content goes below it or to the left of it and below it.

    How do I make the content go beside it? Do I need to make the nav bar a frame or something?

    Reply

    • You shouldn’t need to use a frame. Frames are generally not good practice. Hard to know exactly what you’d need to do since it’s like something in your overall layout.

      I wrote a series of posts on developing basic layouts that might help. Here’s the on creating flexible css layouts. I think it links to the other posts. If not check the sitemap and search for layout and you should be able to find them.

      Reply

  133. For centering…

    Quite easy…

    ul#list-nav
    {
    margin: 20px auto;
    padding:0;
    list-style:none;
    width:1000px; <<<<—— This is your width
    }

    ul#list-nav li
    {
    display:inline
    }

    ul#list-nav li a
    {
    text-decoration:none;
    padding:5px 0;
    width:125px; <<<<<—– Divide your # of elements
    background:#727272;
    color:#fff;
    float:left;
    }

    So if u have 5 li's – set width at 200…

    200 into 1000 = 5

    Reply

  134. I have been looking and with no avail… I am making a nav bar with images and am wanting text to be placed under the image, how do I go about that?

    Reply

    • You should be able to include both inside either the list item or the anchor tag. By default the image should display as a block level element and anything that comes after should sit below it.

      It’s possible something else in your code is throwing that off. I’d need to see more of your code to really be able to offer a solution. If the page in question is online feel free to link to it.

      Reply

  135. I am working with two frames and I want the nav bar to span the full height of the browser window and title bar not to span the whole width

    Reply

    • First thing I would say is to drop frames. They aren’t good practice and will likely cause more problems than anything else.

      Getting things to span the full height of the browser isn’t an easy thing, mainly because the full height is dynamic. I’m guessing what you want is the appearance of equal height columns. The link will take you to a post write describing 4 methods for making that happen.

      Reply

  136. Hey there! First off I want to say this is a fantastic tutorial, and is actually turning me on to CSS. I did a couple websites with pure HTML a long long time ago, but I’m seeing how CSS can be one of the most useful tools.

    That said, I can’t get the bars centered on my this website. I’ve looked at the posts above me, but none of it seems to work. I’ll post my code here as well:

    On the page itself:

    Home
    Page 1
    Page 2
    Page 3
    Page 4
    Page 5
    Page 6
    Page 7

    CSS:
    ul#list-nav {
    list-style:none;
    margin:0px auto;
    padding:0;
    width:900px
    }
    ul#list-nav li {
    display:inline
    }
    ul#list-nav li a {
    text-decoration:none;
    padding:5px 0;
    width:100px;
    background:#485e49;
    color:#eee;
    float:left;
    text-align:center;
    border-left:1px solid #fff;
    }
    ul#list-nav li a:hover {
    background:#a2b3a1;
    color:#000
    }

    The page itself I want to be 900px wide, and none of the suggestions that were there seem to work properly, unless I’m doing something wrong.

    Thanks!

    Reply

    • I’m glad you found the post helpful Robert.

      It looks like you did things properly to center the navbar. Is the page in question online? If so could you post or send me a link? If it isn’t online could you email me the full code for the page?

      Reply

  138. Hi Steve, am in the process of putting my site together and have downloaded the naviation bar, looka fine but am notable to make the pages link together when web previewed. Can you indicate which part of the html code I need to modify please and how? Thanks. Rob

    Reply

    • If I’m understanding right you need to replace the href attribute to point to the correct page

      <li><a href=”#”>Home</a></li>

      You want to replace # with the URL for the page being linked to and I assume you’d want to change Home to something appropriate for the page being linked to.

      As long as all the URLs are pointing to the correct pages they should all be linked together.

      Reply

  139. Hi Steve thanks for this tutorial, the code is very simple and clean. I will add some features to this code such as drop-down menu 🙂 Thanks once again.

    Reply

  141. I changed the code a bit in order for it to fit with the site well. However, now when I make the screen smaller, anything that doesn’t fit on the first line jumps to another.

    What can I do to fix it so it doesn’t do this? And if it was something that I did can you let me know what I did?

    If you are wondering what my code is, the site is the one that I linked to in my post name.

    Reply

    • Zach look for the widths on the list and the list items and adjust them as needed. At some point the menu items will drop down to a new line no matter what widths you set though.

      This navigation bar wasn’t designed to be responsive, though even with a responsive nav bar the same thing eventually happens.

      Reply

  142. Hi,

    I’m trying to get the horizontal width to with the size of my page as well. Exactly 745 pixels wide. but, I want each navigation tab to distribute across that space equally.

    I have worked on this for over an hour and no matter what I do I can not get it to work. PLEASE HELP! Thanks!

    http://www.felixferaplumbing.com

    Reply

  143. If i’m placing the nav bar ot top of the page, what do I need to do in order to have it fixed in its place and not moving while scrolling down the page.
    TNX

    Reply

    • Look into fixed positioning. You probably want to use something like:

      ul#list-nav {position: fixed; top: 0; left: 0}

      You’d have to adjust the values for top and left for your design, but that should be what you need.

      Reply

  144. Hi!
    I would really like this navbar on my site but i cant copy the complete code you have above. Could you please help?

    Reply

  145. Hi Steve,
    Hope you can help. I have used the code to add a border to denote the end of each menu but wanted this to be in black not white. I have a top nav and main nav bar.

    The menus look great but I cannot seem to get rid of the 1st left border before the Home on the main nav and before the Faqs on the top nav.

    Is it possible to do this?

    Many thanks in advance.

    Reply

    • Hi Katie,

      Yes you can get rid of the 1st left border. The trick is to find some way to identify just the one element who’s border you want to remove.

      There are 2 ways you can do this.

      1. Add a class or ID to the element you want to target. In my code above I add the border to ul#list-nav li a. You could add a class to the link and then adjust it’s css.

      <li><a href=”#”>Home</a class=”no-border”></li>

      .no-border {border-left: 0}

      2. The second way takes advantage of the css pseudo selector first-child. Here we’d target the list item.

      ul#list-nav li:first-child a {border-left: 0}

      We can’t place :first-child on the link itself since all of the links are the first-child of their parent.

      There’s a corresponding last-child too if you ever need to target the last element in a group.

      Hope that helps.

      Reply

  148. Hello,

    This has been very helpful!! Can I make it a drop down menu? If yes, what to do?

    Here’s my blog: vivantmaniqui. blogspot.com

    Thanks!

    Mette

    Reply

    • I’m not familiar enough with Blogger to help you with the specifics. As long as you can edit the html and css of your theme then you should be able to create a drop down though.

      Reply

  149. Hello im really new at all of this stuff but it seems you are good at helping, this is my code that created a simple click and select drop down box

    Funny quotes saying pickup lines etc.

    Funny pics

    Great Applications

    Kool Games

    About

    ok so the drop down box with selections is on my website how do i make it go to the right pages please? it has the options all on there correctly but there non clickable and do not go anywhere. thanks.

    Reply

  150. Hi Jess,

    Your code didn’t come through. WordPress converts it to text. If the page is online you can send a link.

    If you have a drop down menu then all you should need to do is wrap the menu items with links. If what you have is a drop down box then you’ll probably need some javascript so that on changing the selection it activates the link.

    By the way I removed your email address. I have it, but didn’t spammers to find it.

    Reply

    • Do you mean the multi-level code from HTML Dog? I didn’t offer anything about multi-level navigation here.

      Is the page in question online? If so could you point me to it so I can take a quick look?

      Reply

  154. I’ve been working for days trying to figure out a menu. I started by posting buttons but they look not to good. I like your design and tried it on my website.
    Posted code but it wouldn’t work help need a simple menu saying

    About us link is index.php?p=1_24

    Sessions class-room on-line link is index.php?p=1_36

    Vendors link is index.php?p=1_16

    Operator Tools link is index.php?p=1_15

    Past Customers and Testimonies link is index.php?p=1_28

    I’ve tried many menu builders but they show up as text only.

    Thank you
    Tim

    Reply

    • Sorry I took so long to reply Tim. Is the page in question online where I can take a look? If not can you send me the full code for the page in an email. I’ll be happy to take a quick look and see if I can help.

      Reply

  157. Hi Steve,
    I played a little with the code and I have two Q’s:

    1. since you use “float: left” on the selector for “ul#list-nav li a” isn’t it redundant to use “display:inline” with the
    selector for “ul#list-nav li” ? I took the last one out and I get the same result

    2. If I have te code below (I modified a bit the section…)

    ul#list-nav {
    margin:20px ;
    list-style:none;
    width:525px;
    /*padding-left:25px;*/
    border: 6px solid black;
    overflow: auto;
    }

    ul#list-nav li {
    /*display: inline;*/
    }

    ul#list-nav li a
    {
    text-decoration:none;
    padding:5px 0px;
    width:100px;
    background:#485e49;
    color:#eee;
    float:left;
    text-align:center;
    /*border-left:1px solid #fff;*/
    }

    ul#list-nav li a:hover {
    background:#a2b3a1;
    color:#000
    }

    I noticed that the is not exactly centered (extra pixels on the left), how ca I fix that? The only solution I found is using padding-left in the ul#list-nav selector.

    Andrei

    Reply

    • The inline thing on the list item is an IE7(?) thing. I think it’s IE7. Definitely an older version and one that was more popular when I originally wrote this post. You don’t need it on most browser though, which is why you can take it out and everything still works.

      Sadly I don’t think there’s a good way to center this navigation perfectly. There’s another method that uses inline-blocks instead of floats that makes centering easier. I’m actually planning a screencast showing how to build it, but as it’ll be my first screencast I may need a few attempts to get it right. It’ll probably be a few weeks at the earliest before it’s ready.

      Reply

      • Thanks for the answer Steve.

        I have another Q, which is in part related to navigation menus, it has to do with dropdown list.

        I found on several sites the code for the suckerfish dropdowns. I list one of the links below:
        http://www.onextrapixel.com/2011/06/03/how-to-create-a-horizontal-dropdown-menu-with-html-css-and-jquery/

        I have a problem with the following part of the code:
        #coolMenu ul {
        position: absolute;
        display: none;
        z-index: 999;
        }

        I tested the entire code (minus jquery)and it works.
        My Q is why it works?

        since we have “position: absolute”, in the submenu should be positioned relative to the first ancestor element who has “position: absolute/relative/fixed”
        Since we have no such elements it will be positioned relative to .
        In my opinion we should have added “position: relative” to the #coolMenu > li selector in order for the whole thing to work , but when I add it gets “messy”.
        Can you please explain what I’m missing ?

        Thank you

        Reply

        • Hi Andrei. You aren’t missing anything. If you look at the demo on Onextrapixel there’s a div wrapping #coolMenu. which has position: relative set.

          I didn’t read through the article itself so they may not have mentioned it, but there is a container that should end up the same size as the menu itself with relative positioning. It probably would make more sense to set it directly on the #coolMenu div, but it ends up working the same in this particular case.

          Reply

          • I looked at the source for the Demo section and its true they have a wrapper.

            However, I used the code (minus jquery)from the article (the link I mentioned previously) where is no wrapper or “position: relative” and still it renders correctly…
            I list the entire code below so its easier for you to see what I’m talking about:

  158. You’re right Andrei. I was working on a drop down later in the same day and realized there was no position: relative on any container. I’m not entirely sure why it works. I made a note to look into it and see if I can figure it out.

    My initial thought is that it has something to do with being inside the other list item, but again I’m not really sure. I had never noticed it before. Thanks for pointing it out. I’ll see what I can find about why it works.

    By the way I commented out the code you had in your previous comment. I can see it on my end, but this makes things cleaner for anyone else.

    I just did some quick research and I think I know what’s going on. I think it’s because the containing element is an inline element. That changes the rules of the positioned element. Check #4 on the definition of a containing element. I’ll dig into it more to better understand what’s going on, but I think the reason is on the other side of the link.

    Reply

      • Happy New Year!

        Turns out I was wrong with the link I pointed you to above. I’m going to post about this since I figure others might find it interesting too, but since the post won’t be published for a couple of weeks, here’s the link that explains what’s happening.

        It’s because of auto positioning. Having auto be the value on all 4 sides is what positions the submenu.

        Reply

  159. Hi Steve,

    your last link that you pointed pretty much clears tjings out.

    I was looking also at the drop down menu below:
    http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery

    I played around with the code a bit and I noticed that when I entered auto value and removed position relative I get the same result, but I could not find the reason this was happening

    I want to point out to you that in the article http://www.vanseodesign.com/css/css-positioning/ you mention under the Absolute Positioning chapter that when no value is specified for top….bottom then the value is zero which is not correct.

    Thanks again, I’m just starting to learn CSS and sometimes a get “stuck” on some of the details like the one above.

    Reply

    • I’m actually writing a post about auto positioning now. I definitely learned a few things in looking all this stuff up.

      Thanks for letting me know about my positioning post. I’ll have to go in and correct it.

      Reply

  160. Thanks for this article- it’s really helpful in thinking about optimal coding for menus using CSS. I think CSS is a great tool in making uniform websites. I can remember the internet pre-CSS and it was a much messier place 🙂

    Reply

  162. Thank for this. Really helps a lot. I’m using this on tumblr. I’m trying to make it so that when you resize the window from the sides, the nav bar travels along with the logo at the top of the page and the post in the middle of the page. Currently the nav bar is to the left, and when I center it, it just stays stagnant. How would I do this?

    Reply

  163. You have been awesomely patient for years with people who are having problems with the horizontal menu so I am hoping you will be able to clearly see where I am going wrong. I am obviously a dinosaur creating the last website when there were far fewer screen sizesl I have been wrestling with a horizontal menu on a site I am helping a friend make. In more screen resolutions than not and in IE, it goes vertical! I cannot figure out what I am doing wrong and would very much appreciate your advise! Thank you.

    Reply

    • Hi Beth. I assume what’s happening is you’re seeing a second row of links. If that’s the case then you’ll have to play around with the different widths. My guess is you’ll need to increase the width on ul#list-nav, but you might have to play around with those on the links as well.

      If you mean that all the links are stacking one on top of each other then the issue is probably a missing display: inline on the list item or the links aren’t being floated to the left.

      If neither of those help post a link or email it to me and I’ll take a quick look.

      Reply

  165. Post has saved my job I have join a firm where I have to design webpages for a web development company thanks for a great help.

    Reply

  166. thank you so much…. i have struggled with a web site all day and night with Asian and roman fonts. I copied your code into the css and index files and “BAM” instant success.

    Wow i am so happy and relieved 11/10 from me

    Reply

  167. wow thank you! I was looking up how to do this for hours =[ but then i found this = ]. You made it simple and easy to understand thank you!
    10/10

    Reply

  168. Hi, Steven,

    I just found this Web page. (Better late than never, right?) I saw that you included, “The complete code for our simple navigation bar is….” and then listed the code in two sections. You had lines 1-7 containing the menu items, and then another 26 lines of style info. I put in both of those blocks of text in my html, but I suspect that the 26 lines of style stuff has to go in a particular place. Can you please tell me where to put it?

    If you want to see the Web page where I tried using your code, you can go here:

    http://www.msb-science.com/index3.html

    Thanks,
    Matt

    P.S. If you’re wondering why there are such weird text colors on that page (like the yellow), it’s because I have a dark background, which I currently have commented out so you can better see what’s going on.

    Reply

    • Hi Matt,

      The html code (the first block of code) is fine where you have it. The css (the second block of code) needs to be moved into the head of your document in between <style> tags.

      As soon as you move the css code the menu should look as I have it above. Then you can play around with the color, padding, margin, etc, so it fits with your site.

      Reply

  171. hello.i just started learning about nav menu.i want to know the widths that r used in ul and a.i want to have 3 li(horizantal menu). i am writing the code in notepad.and also can we write like this:
    #nav ul{
    //code
    }
    li{
    //code
    }
    a{
    //code
    }
    instead of writing:
    #nav ul {
    //code
    }
    #nav ul li {
    //code
    }
    #nav ul li a{
    //code
    }
    i will b very greatfull if i get the answer
    thank u

    Reply

    • First, know that I don’t build navigation bars quite the same way I did in this post. I think this post better reflects what I would do now. The post isn’t specifically about navigation bars, but you can view the source of the demo to see what I do.

      As far as the navigation bar in this post is concerned, the widths are up to you. There’s no specific width you need. You just have to make sure the widths you use add up.

      If you make the links or list items wider than the whole list the items will drop to a second row.

      I hope that helps.

      Reply

  172. I am having trouble with the links themselves. They overlap the element to the right, which contains the main content. I tried fixing it, but not sure why this is happening. Any advice? Thanks!

    Reply

    • It’s like the widths that are set. If they add up to something wider than the available space the menu can overflow the space. Try adjusting the width of the links and the list items.

      Reply

  173. Hi there! Any advice for how to get my nav bar to stretch horizontally to the edges of the page? It is centered within a wrapper, and I am using a few different images within my nav bar so anything that I have been doing has been causing the whole page to go off center. Is there a way I can add div’s outside of my wrapper to go along the left and right side of my nav bar and have those stretch the remaining space? Thanks so much!

    Reply

    • I’m not sure this method for developing a navbar will do what you want. The wrapper can stretch to the edges, but the menu itself relies on knowing the width you want it to be.

      This is an old post and I should probably update it.

      What you’ll want to do is use relative measurements. Use em or % instead of px. In this case I would set the menu with to 100% and then adjust the paddings on the menu items so they’re pushed apart enough to fill the space.

      How are you adding the images? You’ll probably need to add them as background images.

      Reply

  174. hi,am learnig html and css i need to know how to code such that when i click on services in navigation bar it displays the services available and the same to products

    Reply

  175. “Simple easy to understand step by step building of a stylish horizontal navigation bar” Thank you…

    Reply

    • The WordPress Codex has a pretty good article for creating additional custom menus for your theme. Here’s the page on Navigation Menus. The basic idea is you add a function to your functions.php file that registers the menu and then you add a line of code where you want that menu to appear in your theme. The Codex page shows example code.

      Beyond that it’s looking into the wp_nav_menu function for additional arguments you can pass to the function, like having it include a class name of your choice.

      Hope that helps.

      Reply

Leave a Reply

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