The search design works fine until we get down to our "baby bear" (small mobile) size break. We have to do something different there. We make some room for it below the navigation area and then move it down into that space with absolute positioning.

We have a bunch of tweaks to do to make this somewhat drastic shift in location. We change sizing and spacing and colors and everything. What is cool is that at least we don't have to repeat markup to do this, we're reusing the exact search form markup everywhere. That's the power of CSS coming through for us.

Comments

  1. User Avatar
    Gary A
    Permalink to comment#

    Did you ever figure out why you needed z-index on the search area? I realize that the main content area comes after the search (and so would be stacked on top) but as you alluded, it’s absolutely positioned, so it shouldn’t need it.

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