Header and Footer

The update from July 6, 2017 comes with new features - standard header and footer sections with color variations.

They are represented on the following pages:

99_headerAndFooter.html

100_HeaderResponsive.html

Header

Standard header is represented in 2 color variations:

Light header has parent block

<div class="header--standard" id="header--standard">
...
</div>

dark header can be implemented by adding class .header--standard-dark :

<div class="header--standard header--standard-dark" id="header--standard">
...
</div>

It is required to add class .has-standard-header into <body> tag for proper work of the template when using the standard header:

<body class="has-standard-header">...</body>

Footer

Standard footer is also represented in 2 color variations:

Light footer has parent block:

<div class="footer" id="footer">...</div>

dark footer can be implemented by adding class .footer--dark :

<div class="footer footer--dark" id="footer">...</div>

Header and footer containers

There are 2 variants of content positioning in header as well as in footer:

Content is located in the standard container with fixed width:

	<div class="footer" id="footer">
   			<div class="container">
                        ....
                        </div>
        </div>

Content occupied the entire screen width:

        <div class="header--standard" id="header--standard">
                       <div class="container-fluid">
                         ...
                        </div>
        </div>