Creating a functional header

This comes from a request in the forum on a walkthrough of how to have a header with logo, contact details and social media links.

First thing to understand is that you can have multiple wrappers, which are containers for your blocks. This allows you to style groups of blocks differently. Let’s start in the Grid with one wrapper and add a header block, a text block, navigation block, and a social block.

simple-header-grid

Next, open your Header Block options and pick your image for the logo.

You can instead add an image in Design Mode but it will be added as a background image and not within an  <img> tag.

Adjust your Header Block size depending on your logo image dimensions. This is what my grid looks like after selecting my logo.
simple-header-grid-2

I’ve changed my wrapper to a fluid wrapper and set my wrapper top margin to 0.

simple-header-fl-wr

simple-header-wrapper-options

Next, adjust the options for the navigation block to your liking and choose your social icons in the social block. I’ve set my social icons to be horizontal and to have center center position inside the container.

We also have to put some content in our text block. This will be our contact information.
simple-header-grid-3

Now, let’s choose the menu we want to apply to the Navigation Block so only the items we want are showing up on the live site.

simple-header-menu

Now only the items you want will show up in your navigation block. Here is what the live site looks like so far.

simple-header-live-1

Next, let’s work on styling this wrapper. So now we click on the icon for Design Mode (the paintbrush).

simple-header-dm

After some styling, this is what it looks like

simple-header-live-3

For the Header area, I’ve given the wrapper a background color of light blue, by editing the instance. I’ve removed the borders from the navigation block. I’ve set the whole site font family to Arial in Global Styling » Text.

Now, I don’t like how the wrapper is expanded and I’d prefer the contact text to be smaller. Back in design mode, select the Text Block with the inspector, right click and choose “Edit this Instance”.

You could choose Regular Element if you want all text blocks styled the same way.

Then set your font-size to be 90%. Next, select the paragraph element of the Text Block, right click and choose “Edit this instance” and then set the bottom margin to 0.

I’ve also set the bottom margin to 0 under Global Styling » Block because by default, Headway has the bottom margins on blocks set to 10px.

Finally, back in grid mode, I’ve changed it so the text block and the social block beneath it, are the same width and start at the same place in the grid. This change ensures that the contact information and the social icons look centered the same.

simple-header-grid-4

Those changes produce this result:
simple-header-live-4

Spread the word!

Leave a reply

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress