We using some positioning tricks to line up the left edge of the logo and the main content area, while still having the header touch the left edge of the page.

The navigation blocks, at the widest width, are 1/8 the width of nav parent. We set them to inline-block so they will accept that width. We end up having to set the width to 12.49% rather than 12.5% because of subpixel rounding errors.

We figure out a way to get the bottom shadow of the navigation going, but are worried a bit about the technique used. We need to reverse the z-index of each of the menu items so that the first elements is "on top" and step down one by one rather than the last one. We use a series of :nth-child selectors to do this.


  1. arek.bartnik
    Permalink to comment#

    Isn’t it better to make an “inset” box shadow?

    • Chris Coyier
      Permalink to comment#

      Probably yeah =)

      But that makes me a little nervous. Regular box shadows can even have some performance problems (laggy scrolling for example) and at one time, inset shadows were much worse. I think that may be fixed in newer WebKit browsers but still a problem in old ones.

  2. joshfabean
    Permalink to comment#

    Don’t know if you know these things so I’ll put them out there. You don’t have to open the application Calculator but can just type equations in spotlight – saves me tons of time! Also for your color picker ‘command + option + control + c’ will just do the color picker popup for you, this also in my opinion saves me lots of time.

  3. williammalo2
    Permalink to comment#

    @arek.bartnik I was literally thinking “Use inset shadows!” during the whole video lol

  4. Bruce
    Permalink to comment#

    In the case of your recommendation not to use the <ul> or tags for navigation, how would you suggest going about enabling drop down menus, in terms of best practice?

  5. markdesign
    Permalink to comment#

    I am having the same problem with auto reloading. It’s really buggy with css. Had to switch to LIveReload.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.