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.
The GhostPublication 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 and the navigation, regardless of the selected theme (dark/light).
<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 navigation and actions should be changed manually to be visible regardless of the selected theme (dark/light).
<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
<script type="text/javascript">
var fluent_headerLayout = 'extended';
</script>
Use the extended
header layout.