We have a little more work to do to finish up the search area.

We get sidetracked for just a second as I notice we didn't add the three-dimensional stacking affect to the page wrap yet, so we do that and change the coloring.

Then we work on the "Search in:" area, which are the little links where you can click to narrow down search by what area of the site. Later on we'll make that actually work, but we'll get the UI for it set here. The links are a light blue, but the "selected" link turns white and gets underlined, which is plenty of feedback on which is selected.

We also add an ✕ character (that we snag from CopyPasteCharacter) as a little link you can click (or tap) to close the search area.

Once we have the design all set, we find that opening and closing the search area is a little awkward. Things temporarily wrap upon themselves when the open search area is temporarily narrow. To fix it, we make sure nothing wraps with white-space: nowrap; and ensure nothing sticks out weird with oveflow: hidden;.

I end it by saying we'll make the search engines next, but we don't actually get to it next, that'll be coming up around Video #094.


  1. waydechism5

    When i use the jquery function anf refresh the page my <a href="#" rel="nofollow">✕</a> gets a style=”display: none;” and the x disappears.

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.