Align nav bar vertically – help needed

[matthisco]

Hello,

Can anyone please help me align the grey nav bar list items in the center of the page, with equal padding top and bottom?

My nav doesnt sit flush with the white content div either can anyone tell me how to remove the dark grey space in between?

Here is my codepen:

http://codepen.io/matthisco/pen/ojaZdN

Many thanks

[TheDoc]

There are a couple of different issues here causing these to be misaligned. The first is an easy fix: <ul> by default has a padding-left applied to it. It doesn’t appear as though you’ve removed that. That’s as easy as:

.site-nav__list {
  padding-left: 0;
}

The other problem is that .site-nav__list-item has margin-left: 60px applied to all items. Unfortunately, that is going to cause things to be misaligned, too. You’ll want to do something like this:

.site-nav__list-item:not(:first-child) {
  margin: 0 0 0 60px;
}

This will apply a margin-left of 60px to all list items except the first child.

[matthisco]

Thanks very much for the reply.

Is it possible to make the spacing in the header consistant for different screen widths? I would normally do this by adding padding to the list item, so it is vertically centered in the grey header. Is there a better way? As I’d like to have a nav with the light grey background 100% of the screen, with white links.

Do you know how I can remove space between the header and the content too?

Thanks again

[willyledev]

This is my first time on css-tricks so bear with me.

This white space you are experiencing is due to the inherit css on the h2 tag. You can remove the white space between the header and the content by setting the top margin of the h2 to 0px. Also, if you don’t want the heading to flush against your nav bar. You can add padding to the top of the h2. The css below will solve your problem.

h2{
margin-top: 0px;
padding-top: 20px;
}

[matthisco]

Thanks for the replies

[Author]

Posts