Header
The header background is full width and can be a color or an image. The background has an overlay with controls for color and opacity. The opacity can be increased to make the text more prominent.
The header has a grid layout with a logo in column one and the h1 heading for the web site name in column two.
Column three is left empty to leave space for the mobile navigation icon.
There are controls for setting the height and for setting a lesser height on phones.
The text can use a web safe font or a non web safe or Google hosted font with a web safe fallback.
Logo
Like the heading, the logo is vertically centered in the header and has controls for setting its percentage width at full height and on phones. As can be seen from the example, the logo can be rotated using a slider.
The logo can be configured as an internal link if required to link back to the home page.
Images
The header background image is inserted in two sizes - one for normal use and the other for mobile phones. The images used in this example are 1600 x 360px and 800 x 180px.
Info Bar
The optional info bar can be turned on by checking a box. This also has a three column grid layout.
The first column has a phone number that switches to a "Call Me" phone icon when the page is viewed on phones.
The center column has an h2 heading and the right hand column has an email icon. The email address is entered as name, domain and domain extension in separate boxes and the @ and dot are added using Javascript. This prevents spammers using scraping software from harvesting the email address.