Comments on: A Full-Width Centered Navigation Bar

By: Jack Durrant

Jack Durrant — Wed, 01 Feb 2012 22:08:57 +0000

Thanks for making this tutorial, now my life is much easier! lol

By: Mike

Mike — Sun, 13 Nov 2011 22:59:33 +0000

how do u get the CSS horizontal nav bar hover state to hover above a banner .gif please anyone? Please email back, thanks. Mike

I have this so far:

#navbar li:hover li a {
background-color: #6B8E23;
border-bottom: 1px solid #fff;
color: #000;
}
#navbar li li a:hover {
background-color: #32CD32;
}
/*——————————

By: Amit

Amit — Mon, 24 Oct 2011 18:04:49 +0000

Thanks a million, great learning curve, you made my day.
GOD BLESS YOU !!

By: Cascading Style Sheets Reference Links | kabayview.com

Cascading Style Sheets Reference Links | kabayview.com — Mon, 10 Oct 2011 13:55:15 +0000

[...] A Full-Width Centered Navigation Bar – Rob Glazebrook [...]

By: Drew

Drew — Wed, 28 Sep 2011 08:41:35 +0000

@Phil,

Make sure in your css you have the following:

body,html{
width:100%;
height:100%;
padding:0;
margin:0;
*****Text-Align:center;**** <<< }

I would also make a #navContainer ID within the Nav just to make it easier to control
something like….:
#navContainer{
width:1000px;
height:30px;
margin:0 auto;
padding:0;
}
or something along the lines of that.

By: Drew

Drew — Wed, 28 Sep 2011 08:37:38 +0000

Incase someone was still wondering about this, the only thing you have to add to make the navbar stick to the top of the page is add this little snippet:

#nav{
position:fixed;
top:0;
left:0;
}
That should just about do it.

By: Phil

Phil — Fri, 26 Aug 2011 07:25:17 +0000

This tutorial has been extremely helpful… thanks!
However, I am still encountering the problem of centering my navigation elements within the nav similar to some of the other people who have left comments here. Is there any way at all to not just center the nav div, but also the containing navigation elements? Perhaps another div within the nav? Any suggestions?

By: Kimberly

Kimberly — Thu, 14 Jul 2011 15:11:21 +0000

I am having trouble with my horizontal navigation at the end of my page. i cannot get it to stay down at the bottom. it winds up after my last paragraph

By: Asif Rasheed

Asif Rasheed — Sun, 03 Apr 2011 12:08:31 +0000

Hi,
I’ve just gone through your website and learnt a lot. You’ve solved my problems in many ways. I am stuck in a very simple thing and I am pretty sure you can solve my problem. If you go to http://www.lutonminibustravel.com and fill in the REQUEST A QUOTE form on the left hand side of the page in FIREFOX, it would work perfectly fine. now try this in Internet Explorer. I am sure it wouldn’t work. I need to know when it keeps saying “Please enter all required fields” and it doesn’t go through. PLEASE HELP ME!!

Regards,
Asif

By: Shannon Range

Shannon Range — Tue, 15 Feb 2011 22:06:20 +0000

That was the easiest CSS fix I’ve ever done – THANKS!