Other header stuff goes here

Fixed header, dropdown menu

Things to be aware of when tweaking this component.

The top container I called 'parent' and gave it a fixed position. Inside it I have two containers, 'first-child-1' and 'first-child-2'. I have given them all a height, and the height of the parent has to be the sum of the child containers' height.

In first-child-2 I placed everything pertaining to the dropdown plus the h1 text. This container got the height of 60px which suited the size of the font icon quite well. If the font icon's size is changed, the height of the container will have to be adjusted (and that of the parent!). Make sure you watch the font size of the h1 element on small screens! Try to avoid wrapping.

The other child is intended for the other elements you want to have in the header (overloading will look cluttery!). On small screens this content will wrap, and if more container height is needed, remember to adjust the height of the parent accordingly.

It doesn't really matter what goes where into those two child containers, but the dropdown must be in the lower one.

Then there is the container (this one) with the text and the large image, called 'ample-top-padding'. It is sitting below the parent, not inside it. The top padding (don't use margin here, that will break the design!) must be at least as much as the height of the parent, because the parent's position being fixed and make the next container slide up behind it. So, with the padding the page contents will come clear of the parent, otherwise its content wouldn't be visible. Remember that if the parent's height is changed, the padding has to be changed too.

For wide viewports I have used the flex order property, so that the two 'kids' come down on one level.

Placeholder Picture

Winter night in Arendal, southern Norway.

Creating the search box

  1. Go to https://cse.google.com/cse/ and create a searchbox. You will find instructions on the page. 
  2. You will have to type the URL for the site, or part of the site, you want to make searchable. The form on this page searches Coffeecup.com, so change that to what you need.
  3. When done, select 'Save and get code'. I'm placing the actual code in the .pdf document that comes with this component.
  4. Place a html element on the page where your searchbox is to appear, and paste the code into the window you find in the Element pane.
  5. The searchbox is by default quite bulky and won't fit into the space on this site. Therefore edit the code as said in the .pdf.
  6. Also, to get rid of some wide margins and padding placed by Foundation, add some styling to the Head section on the Settings pane. The styles can also be found in that .pdf. You can play a bit with the values, but don't be too generous ;)

If you have ample space for the searchbox, those two last # won't be necessary.

I recommend saving this as a theme first, and then you can create a component of the heading with menu and searchbox included by selecting the 'parent' container.