Word on the Wing

Header

I yanked the structure from this free layout and made it work on phones. There's a lot of space for links on it (more than I'd ever know what to do with), so it's great if you have a ton of pages. But you can also delete sections or just use the sidebar for text or widgets or something. You do you!

You can copy the source code for this from Github! Or just take it from the view source page directly.

Navigation

There are 2 different navigation styles that can be used in the sidebars and in the extra navigation in the header. There are examples of both in the sidebar: the first one uses the class "grid" and the second uses the class "list". I have done my best to make the naming transparent. The "list" class works best in the header if you have only a small number (4-ish) of links that you want to put there, though if you're good with CSS, you can make it fit more if you'd like.

Header images

There are 2 variables where you'll need to add your header image if you want it to display on both desktop and mobile. The background will resize on different screen sizes, but might still get cut off, so experiment to see how it responds.

Formatting

H1

H2

H3

H4

That's a link

  • This
  • is
  • a
  • list
    • List
    • inside
    • of
    • list