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.
this is easy to understand and use, i like it 🙂 10/10 for me.
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
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.
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
Thanks! I’ve been looking for a nav bar for awhile and I think I found it. I’ve been thinking about changing the look of my website and this helps.
Thanks again.
Glad I could help. When you have a menu or navigation bar think lists first. If you get good at styling lists with css you can create some nice menu systems.
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
put your html cod in menu class
.menu{
margin:0px auto 0px;
}
Thanks Miles. I actually wrote a post on centering with css so I’ll direct you to that post to answer your question.
Centering With CSS: Web Pages And Block Level Elements
I hope it helps and feel free to ask questions if it doesn’t.
By the way I’m sorry your comment never went through. Every so often the comments here hiccup and don’t seem to want to go through. I manually entered it to make sure it would work. Sorry about that.
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
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.
Thank you very much. Your instructions are helping me finally learn CSS. I appreciate the help.
Glad I could help Debbie. If you have questions feel free to ask. I’ll be happy to answer and try to help.
this is helpful for me since i want to organize my page. but the links and profile still appears in my page. can u help me with this..i appreciate it.
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.
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.
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.
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.
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.
hi steve.tnx for d reply.will try working on it now. i hope it will look okay 🙂 will message u again ok.
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.
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?
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.
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.
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.
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.
Forgot to say to notify me by e-mail, thus this additional post.
(wrote my reply to your reply. Mine should be right above this.)
Will do. It may be awhile before I can get to it, but I’ll let you know when I do. Of course you’re always free to subscribe to the blog via rss or email. 🙂
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 🙂
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.
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
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.
hi.. thanks for the tutorial but i still can’t put the nav bar, the only thing that shows in the browser are codings. help?
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)
well i just tried your example navigation bar above “complete navigation bar”… is that example the complete or needed to be closed??
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.
i already tried that on my webpage… but it didn’t work…
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.
could you check my webpage to see what’s wrong with it..(http://buangkatalaga.webs.com/)
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.
thank you very much! now it’s working.. 😀 once again thank you..
Glad I could help. Feel free to ask more questions if you have any.
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.
Can you post a link to a page online where you tried to use the code. I’ll be happy to take a look. If it’s not online feel free to email me the code.
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?
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.
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.
Awesome!!! Helped Me out a whole lot.
Glad I could help.
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??
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.
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.
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
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?
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.
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
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.
What if the color for the bar I used is a gradient, like the title bar on this page?
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.
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!
Glad I could help. Do let me know how it goes and if I can help more.
This Tutorial does not help me understand anything at all. I did everything it told me to and my NavBar looks like the first example.
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.
I tried both external and internal. It’s not linking from the external and the internal still looks like the bulleted list.
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?
This is great, thanks a lot. But is there a way i could make this nav bar vertical instead of horizontal? Thanks!
Thanks Omar. Yep. The first link at the top of this post shows a vertical menu. Here’s the link again
vertical menu with css
Thanks a lot Steven. Sorry, I didnt notice the link was a vertical menu. Once again, thanks a lot!
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
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.
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
What is the little code for navigation on one page? I can’t seem to find it elsewhere…
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.
How to display the current page name which is visited? means is the any arg in wp_list_pages() through which we can get the visit page name?
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?
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.
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?
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.
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?
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.
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!
Thanks Jenn. I’m glad I was able to help.
I need this for HTML though 🙁
You can use all the code here with html or xhtml.
xhtml is basically a stricter version of html. if it works in xhtml, it will work in html.
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.
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.
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.
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.
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…
Steven…ignore my question, I figured it out! Thanks for taking the time to educate us!
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…
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.
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….
Hi Jamie,
I did get your email. I apologize for not getting back to you, but it’s been a busy week for me. As soon as I get a chance (probably this weekend), I’ll take a look at your site and see if I can help.
Thanks for following up, much appreciated. You are a genius, and I thank you for your time!
I don’t know that I’m a genius, though I don’t mind the compliment. Just glad I was able to help you get the menu looking how you wanted.
how do i link a navigation banner with a url such that when the banner is clicked it will load the url automatically
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>
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
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
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.
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.
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.
Is there a way this could be used in Dreamweaver, and if so where would I need to insert the code?
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.
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
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.
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.
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?
ohhhhh—–WOW..
it took me agess to find this….
thnkkk you soooooooooooooooooooooooooooo
muchhh……
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
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.
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
Very easy to understand for beginners, Thanks 🙂
Thanks for the free scripts. I am seo strong, design weak!
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
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
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.
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.
I am still struggling to learn CSS, you have dome some great work covering Navigation bar design. thanks for putting this together.
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.
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.
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.
I like this navigation bar i want to mouseover drop down, how can create that type navigation?
manoj I used the Suckerfish system for creating drop downs, though there are plenty of other solutions.
One of these days I’ll write a more detailed post about it.
I was wondering how I can add some space under the menubar if I have two lines of these menu buttons?
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.
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!
Okay, I think I got it figured out… How would I be able to use your script to stretch across the screen?
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.
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]
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.
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!
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.
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!
Glad I could help Ava and it’s never stupid to ask a question. You can definitely change the fonts in the navigation, though I didn’t add any code here.
You’d want to add the code to:
ul#list-menu li a
and you can change any of the css font properties
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.
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.
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.
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.
Steven,
I have one of these navigation bars added into my blogger code. however, how can I make it stay at a fixed location whether or not the screen is minimized or maximized? http://www.fixyourimages.blogspot.com. I can email you the code if you can help me. Much appreciated!!
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
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!
Agreed. Too many people think they need to cram everything into the home page as though it’s the only page anyone will ever see.
I just want to say thanks, great and simple and I learned some more about CSS, created my menu and I am loving it.
Thanks again.
I’m glad I could help and I’m glad you were able to learn something here.
hi man,
i have a problem with my website , it appear a navigation bar at the bottom of the page how i can removed. i set the body margin at 100% weight but nothing happen….
I would need to see all the code for the page to be able to offer a solution.
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?
I would need to see your code. If the page is online feel free to post a link to it. If it’s not online you can email me the code or send it through the contact form.
Thank you for your tutorial. How do I create drop down navigation bars from this navigation bar you did?
It’s a little more than I can go into in a single comment. I usually use a system based on the suckerfish system.
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
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}
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!!
Thanks Jen. I’m glad I could help and also glad you figured out the issue you were having.
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;
}
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.
Great tutorial. Working perfectly.
I was wondering can you write tutorial how to add drop down menu ?
Thanks 🙂
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.
Useful css menu bar, thanks for the example.
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.
woops, here’s the html:
Home
About Us
Services
Products
Contact
Description
the second td is another cell in the same row.
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.
What’s ur email?
It’s on the contact page or you can use the form up and to the right. They both reach the same place.
How do I remove the white bar on the left of the navigation? Also, as everyone else, this has been very helpful. Thank you.
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.
How about search engine optimization? is this okay with google?
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.
your navigation bar code is very nice i will set it in my site . . give more information about web design code
If you want more just subscribe to the blog. I’ve been running a series on different css layouts with plenty of code in each.
It`s work Fine and perfect in normal Html template and in Custom WordPress theme great job.
Very Simple and Stylish menu.
really good tutorial… i’m a CSS beginner and even i could do it with a little use of my brain hehehe thanks!
Thanks Andrea. We were all beginners once. 🙂
Thank you so much Steve! This is exactly what I need for my new website.
Glad I could help Shey.
thank you for your clear instructions
Excellent.. and easy steps to learn..:) Thank you..
thank you for this great tutorial . 😀
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.
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.
how do i get rid of the very left border?
also how do i get the text to be completely in the center? I’m trying to do this navigation bar:
http://www.iwillcraft.info/forum/
also, (sorry about so many also’s) how would I make it so that the minimum width of each link is 70px, but if it needs more space it can expand?
again, the navigation bar that I’m trying to recreate is this: http://www.iwillcraft.info/forum/
and what I have so far is this: http://www.iancraft.com/iwillcraft.info
Never mind about all my problems, I fixed all of them by experimenting with random code lol
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. 🙂
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
Ok, re: my last comment. I have it on the page but cannot work out how to centre it.
Any tips?
Thanks,
John
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.
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?
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.
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?
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?
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.
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!
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.
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.
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!
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
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.
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!
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.
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.
Feel free to email me the code Tracey. It may be a couple of days till I get a chance to look, but I promise I will.
Hey Steven. Sorry for yet another question, but I am working on a contact form, and the form itself works, but when I hit ‘submit’, it just shoots me to the .php file for it. Could you tell me what is going on here?
(My trouble page is http://173.29.21.22/htmlform.html)
Did you get my email? I replied in an email as opposed to here. If not let me know and I’ll email again.
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?
Thanks Niknetniko. Simple depends on your perspective. I usually use the Suckerfish drop down system to create drop down menus.
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?
Hakoo I use the Suckerfish system to create drop downs. It’s not too complicated and is mostly css with a small bit of Javascript for older versions of Internet Explorer.
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
Hi Mohammad. Could you email me all of your code? I’ll need to see everything in order to know what’s going on. If the page in question is online somewhere a link to it will work.
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.
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.
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
Thanks Benjamin. I’m glad this post was helpful.
This worked great on our website! Thanks!
hi,can you please tell me how can i add subitem in this menu bar
I use the suckerfish system for adding submenus. If you look up I’ve linked to it in several comments.
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?
Thanks Joe.
To make it wider you have to adjust the width of a couple of elements
ul#list-nav
ul#list-nav a
I gave the first a width of 525px and the second a width of 100px. You’ll have to play around with the values and adjust them to add more. You probably just need to change the first from 525 to 625ish.
thank you thank thank you thank you thank you thank you thank you!! it worked!!
10/10 mate!
Glad I could help Joe.
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”
to make it easyer i posted y site plus the sites css in a paste bin + your code a bit changed
http://pastebin.com/yWaMdJwq is the link
you need to copy the css in a new text doc
cause they are link normaly exturnal
and sorry for the bad english
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.
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!
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.
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;
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
sorry the links showed up rather than the code
<li class=”1color”><a href=”#”>Home</a><a href=”#” rel=”nofollow”>About Us</a></li>
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.
Thank you for your response, it’s much appreciated. I have got it working, yay :))
Hi can anybody help me with this, I am having a problem with this nav menu, when the site zoom out or zoom in, on the browser, the nav button drop down from the line.
see the screenshot,
http://i43.tinypic.com/jfzoyx.jpg
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.
Great tutorial, I added this navigation menu to my site with some css.
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
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.
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.
Thanks for the help and info, and also thanks for describing in the comments, how to add the end border! Great work, thanks! 😀
The only thing that i wanna say is thanks. you make this tutorial very easy to understand
i would like to know how i can center the nav bar
I wrote a post on centering with css. The basic idea is you want to give the element you want to center (in this case #list-nav) a width and then set the left and right margins to auto. You also need to use a proper doctype for some older versions of IE.
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
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.
that helped a bit but i need adust then length a little bit thanks
do you mind showing us how to create navigation bars with drop down menus or refer me to else, please.
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.
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.
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}
Thanks for the post..Its working..Do u have css code for sub menus…
For submenus I use the suckerfish system. I’ve linked to it about a dozen times in the comments so a quick search on the page should take you to it.
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?
I haven’t looked into Bootstrap Twitter at all so I’m not sure what you would need to do.
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?
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.
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
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?
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.
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
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.
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!
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?
how to make it double navigation bar can u help please
I’m not sure what you’re asking. Are you trying to add a second navigation bar? If so the same code would work, though you’d need to rename some of the ids.
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
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.
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.
Nice job on this tutorial. Appreciate you sharing
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.
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.
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
Hi Kelly. I just took a look at your site and it looks like you managed to get the navigation working like you want. Is that right or do you still need help?
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
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.
Hi!
I would really like this navbar on my site but i cant copy the complete code you have above. Could you please help?
Hi Henry. I’m not understanding the issue. Are you having a problem adding the code to your site? There’s not much I can do to help you copy the code.
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.
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.
Hi,
how can I move the nav bar?
You can place the html wherever you want. The code here doesn’t limit where you place the navigation bar. Where you place it is up to you.
how to add the menuitems
I’m not sure what you’re asking.
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
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.
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.
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.
it was very helpful.thanks……
Thanks so much for your help!
Your instructions in these comments have been very beneficial.
I’m glad I could help Roger.
Tried the multi-level code three times, and cannot get it right.
Help possible?
Note: I was in Louisville last week. Wish I had known you were next door.
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?
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
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.
Thanks for this great post!
This was very helpful! Thank you!!!
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
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.
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
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.
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:
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.
I’ll give it a read and I’ll get back
and…HAPPY NEW YEAR!!!!
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.
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.
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.
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 🙂
Thanks James. I have a hard time remembering the web without css too.
thanks for the tutorial, I am newbie in the world of web development please guidance ..
are still confused to issue margin and padding,?
What are you confused about?
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?
Thanks Richard. I would need to see more of your code. Could you post a link to your site or send me a link in an email?
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.
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.
very helpful to me who is still learning
No matter how much we know, we should all be learning.
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.
I’m glad I could help. Does this mean I can expect a portion of your paycheck each payday? 🙂
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
Thanks Dean. Im glad I could help. Not bad for a nearly 8 year old post too.
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
Thanks Eric. I’m glad I could help.
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.
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.
Yes, that worked.
Thanks, Steven!
Matt
very helpful thanks
Thank you so much for this quick refresher! This article was super helpful and simple for me to understand. 🙂
Thanks Molly. Glad I could help.
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
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.
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!
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.
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!
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.
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
You need to add the correct URL for each page to the proper link
<a href=”url-for-your-page”>
“Simple easy to understand step by step building of a stylish horizontal navigation bar” Thank you…
Hello Steve, can you write a tutorial to add custom/additional menu to any WordPress theme?
It would be of great help to everyone I guess.
Thanx Again.
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.
I hope your day is fun because you have provided a cool article.