The Header

The header is fixed to the top of the page, and spans the width of the page. The DIV element contained within the HEADER element allows, if desired, the internal navigation elements to be constrained within the width of the content of the page by using the css 'center' and 'responsive_page_width' classes, which are described later.

Flex (described below) is used to appropriately position the NAV elements.

...
<header id='header'>
    <div class='header_inner center responsive_page_width'>
        <nav />
        <nav />
    </div>
</header>
...

The HEADER element CSS

The following css directives position the header at the top of the page, and should be suitable for most web projects.

BODY > HEADER
{
    box-sizing:border-box;
    position:fixed;
    top:0;
    left:0;
    right:0;
    padding:0;
}

The following css directives give the header a default height, background and text colour, and a white bottom border. These would be typically overridden by user projects.

BODY > HEADER
{
    min-height:    40px;
    line-height:   40px;

    background:    #A63400;
    background:    black;
    color:         white;
    border-bottom: solid 1px white;
}

The following sets the HEADER to use flex with space-between as usually the header contains child elements that are spaced out horizontally.

BODY > HEADER
{
    display:flex;
    justify-content:space-between;
}

The following, which is replicated later for NAV elements, uses flex to appropriate space sub-menus.

BODY > HEADER > DIV
{
    display:         flex;
    flex-direction:  row;
    justify-content: space-between;
    align-items:     center;
}