header.md

 # Configure the Header Layout
+
+The supported header layouts:
+
+* **standard**: by default, a layout with the full size site logo and content split onto 2 lines
+* **extended**: the largest layout with content split into 2 content areas with site logo, site title, and an optional background image separate from the other contents below. <br />
+The Ghost `Publication cover` will be used as the optional background image.
+
+In accordance with the main color of your background image, you should define the color of the title manually, regardless of the selected theme (dark/light).
+
+```html
+<style type="text/css">
+    @media (min-width: 639px) {
+        #siteHeader:not(.shyHeader) .mainHeader .titleAndnavSiteWrapper .siteTitleSubcell a.title {
+            color: #CDCECF;
+        }
+    }
+</style>
+```
+
+In the case of not extended layout, the navivation and actions should be changed manually to be visible regardless of the selected theme (dark/light).
+
+```html
+<style type="text/css">
+    @media (min-width: 639px) {
+        #siteHeader:not(.shyHeader) .mainHeader .titleAndnavSiteWrapper .siteTitleSubcell a.title,
+        #siteHeader:not(.shyHeader) .ms-HorizontalNavItems .nav li a,
+        #siteHeader:not(.shyHeader) .actionsSubcell a {
+            color: #CDCECF;
+        }
+    }
+</style>
+```
+
+## Example
+
+```html
+<script type="text/javascript">
+  var fluent_headerLayout = 'extended';
+</script>
+```
+Use the `extended` header layout.