In this version of the Alternative Website, th header / banner has been configured so that you can change both its layout and background to suite your personal website. This can be done with minimal html or css experience.

The layout of the header is managed by a css grid with named areas. The default grid is 3 by 3 with equal width columns and variable height rows as shown below:

Areas with the same name are considered a single area, thus the Logo spans two rows in column 1, the location spans two columns in row 2 and the menu spans three columns in row 3.

Thus, if you create a different grid and add the three named areas as required, they will be re-positioned. The only consideration is allowing enough space for each element.

For example, by adding the following style to the ows-headerGrid div…

 style="grid-template-columns: 3em repeat(2,1fr); grid-template-areas:'menu1 logo location';align-items:end; "

..you create a single row header as shown below:

Note that I have modified the menu section to put the text 'Menu' first but it could be removed completely if preferred. You could also add some padding to the top and/or bottom of the logo. All items align to the bottom of the grid. - align-items:end

By default the header background is the theme colour - ows-theme5 Your can change this to any colour you wish simply by using either one of the w3-colours supplied in the w3v5.css file or in fact any colour using a hex colour value. The former method may also change the foreground colour.

You can also use an image for the background. In this case you should set the background colour to ows-theme0 which inherits the colours of the parent element; in this case the page background and foreground colours.

There are a number of considerations to make when selecting an image for this purpose.

• Setting it in the siteHeader div will make it span the whole page width but this is totally dependant on the visitors browser.
• Your image should be at least 2000px wide so that it does not need to repeat across the banner.
• You will need to ensure that the text in the header is still accessible
• As the screen width reduces, the image will adjust to fit the available space, this may affect its effectiveness.

The code below illustrates one way to implement an image in the header area.

<div id="siteHeader" class="ows-theme0" style="background: url(images/background2024.jpg) center bottom no-repeat;">