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.
<ul id="list-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
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.
ul#list-nav {
margin:20px;
padding:0;
list-style:none;
width:525px;
}
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.
ul#list-nav li {
display:inline
}
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.
ul#list-menu li a {
text-decoration:none;
padding:5px 0;
width:100px;
background:#485e49;
color:#eee;
float:left;
}
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.
ul#list-nav li a {
text-align:center;
border-left:1px solid #fff;
}
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.
ul#list-nav li a:hover {
background:#a2b3a1;
color:#000
}
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:
<ul id="list-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
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
}
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.
Subscribe to 
TheVanBlog | 
Email This Post
this is easy to understand and use, i like it
10/10 for me.
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
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.
What others are saying about this post
quicker alignment methodHow To Highlight The Current Page In WordPress | Van SEO Design
How To Design An Effective Home Page | Van SEO Design
Designing For A Hierarchy Of Needs - Smashing Magazine
Designing For A Hierarchy Of Needs | Web Design Cool
Designing For A Hierarchy Of Needs
Designing For A Hierarchy Of Needs | Webreweries.com | Tips | Photoshop | Java | Illustrator | Dreamweaver | After Effects | Graphics | Animation | Design
Designing For A Hierarchy Of Needs | CMS Code
Designing For A Hierarchy Of Needs by webdunyam.net
Designing For A Hierarchy Of Needs | Tutorial51
Wordpress Blog Services - Designing For A Hierarchy Of Needs
Designing For A Hierarchy Of Needs | MarketingTypo.com
Designing For A Hierarchy Of Needs | Easybranches.com™
TG Designer » Designing For A Hierarchy Of Needs
ArticleSave :: Uncategorized :: Designing For A Hierarchy Of Needs
Designing For A Hierarchy Of Needs | jiggymotto.com
Designing For A Hierarchy Of Needs | i know idea
Designing For A Hierarchy Of Needs | Defonic International Solutions
Designing For A Hierarchy Of Needs | Communication et marketing