Navigation Bar

[Looking2Learn]

Hi Guys,

Quick thank you for all the previous help, been really helpful and i’m getting their slowly.

Sure this one wont be much of a challenge for you guys!

Currently having problems with my navigation bar, its leaving space above and to the right of the bar itself, so basically the background color of the bar is of the body instead of the wrapper, i’m also finding it hard to have the bar neatly in the center of the page as appose to either the left or the right, please see below for my css:

#wrapper {
width: 900px;
height: auto;
margin: 0 auto;
background: #fff;
}

#header{
float: left;
background: white;
margin: 0 0 0 0;
width: 100%;
height: 120px;
}

#navigation ul{

width: 100%;
float: right;
margin-bottom: 0px;
padding: 0px;

}

#navigation ul li{

float: left;
list-style-type: none;

}

#navigation ul li a{

display: block;
padding: 8px 20px 8px 20px;
text-decoration: none;
font-family: aerial;
font-weight: bold;
font-size: 14px;
color: grey;
border: 1px solid #BBBBBB;
background: white;
}

#content{

float: left;
background: white;
margin-bottom: 0px;
padding: 0px;
width: 100%;
border-radius: 6px;

}

I would like the sizing and placement of my bar to be similar to this page:

http://www.theplayersagency.com/

Again so appreciative of your time and help.

Enjoy your evenings

Joshua

[jurotek]

Put it on [Codepen](http://codepen.io/pen/ “”)

[jurotek]

> I’d look for one that was built much better than the one in the link you provided

Agree. Browsers are smarter then we think. It knows that a is inside li and li inside ul so the mark up is not efficient and redundant. Something like this will work better. Here’s CSS

.navigation {your styles}
.navigation li {your styles}
.navigation a {your styles}
.navigation a:hover {your styles}
.navigation a.active, .navigation a.active:hover {your styles}

and HTML

• Link 1
• Link 2
• Link 3

If I don’t use dropdowns I don’t use unordered list for nav at all

.navigation {your styles}
.navigation a {your styles}
.navigation a:hover {your styles}
.navigation a.active, .navigation a.active:hover {your styles}

and HTML

Link 1
Link 2
Link 3

[Looking2Learn]

Hi,

Thanks for the response, so i have put it into code pen, notice the space above and to the right at the navigation bar?

At this point i’m just looking to keep it as simple as possible while learning.

http://cdpn.io/tblDm

Kr

[amoss]

http://codepen.io/anon/pen/vjbBd

Removed a div as noted in the html.

[Alex]

Automatic margins are being applied to the ul, just set margin to zero, I see you have already done it to the bottom.

[Looking2Learn]

Thank you that is very helpful!

I have cleared the space at the top through the margins, but am still left with space to the right, if I try and “center” the bar, it becomes vertical, if i increase the width it becomes vertical, do i increase the padding instead? Code pen below:

http://cdpn.io/ylpwq

Kr

[Alex]

You could add a width to the li, something like 15%, or you could do a bit of math and set exact pixels. Or you could leave it how it is and style the parent div wrapping it all. Keep in mind that your #navigation is collapsed because you floated your ul, you can use a clearfix for this.

[CSS-Tricks.com Clearfix](https://css-tricks.com/snippets/css/clear-fix/ “CSS Clearfix”)

[Chester]

(http://codepen.io/looking2learn/pen/ylpwq “”)

Is this what you want? I added a width: 150px to your a tags. Thats 900px(wrapper) / 6(a, nav). Also added box-sizing: border-box.

[Looking2Learn]

Thanks Death180 some very helpful points

@ chester, What your describing is exactly what i’m looking to do, However I’m new to codepen and when I open your link it just directs me to my original page and none of your modifications are visible, can you direct me please?

[jurotek]

@Looking2Learn, Please take a look at [THIS](http://cdpn.io/p/ljdCF “”) take time and go over it and compare it with what you had and figure out why this and that was removed or added and why. HTH.

[Chester]

@Looking2Learn

> However I’m new to codepen and when I open your link it just directs me to my original page and none of your modifications are visible, can you direct me please?

Me too, sorry for that. [Here’s](http://cdpn.io/Fvrhe “”) the new link.

[Looking2Learn]

Thanks guys, very helpful!

Kr

[Looking2Learn]

@chester

Can you please explain to me what….

* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Is actually effecting? I now understand what you explained in width, would you please just define what this css coding is actually for? As i can’t find the answer anywhere but i can see clearly is the defining factor in making my nav bar work…..

Thanks again Joshua

[jurotek]

[Box sizing explained…](http://www.paulirish.com/2012/box-sizing-border-box-ftw/ “”)

[Author]

Posts