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.

Comments

  1. User Avatar
    arek.bartnik
    Permalink to comment#

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

    • User Avatar
      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. User Avatar
    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. User Avatar
    williammalo2
    Permalink to comment#

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

  4. User Avatar
    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. User Avatar
    markdesign
    Permalink to comment#

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

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag