Applies To: SharePoint Online (Modern)
Description
This article describes the steps to customize the site header using Crow Canyon Branding (Modern Sites).
This article has sample configuration for a customized header. As per your use case you can change the CSS and script code to get a different look and feel.
Modern site with customized header:
Detailed Steps:
- Configure the header settings and CSS in Crow Canyon Modern Branding
Navigate to Site Settings -> Crow Canyon Branding (Modern sites) under Site Administration and configure the custom CSS and Header HTML as shown below.
Custom CSS
.ccs_LogoArea{float:left;width:160px;height:160px;padding:0;margin:0;box-sizing:border-box;padding:5px}.ccs_Logo>img{width:150px;height:150px;display:block}.ccs_HeaderArea{margin-left:160px;height:160px;vertical-align:top;box-sizing:border-box;width:calc(100% – 160px)}.ccs_HeaderArea >.ccs_HeaderRightTableArea {display:table;width:100%;} .ccs_topHeader{height:115px;display:table-row}.ccs_Header_PageTitleArea{padding:5px;display:table-cell}.ccs_Header_PageTitleArea>.css_PortalHeading{font-size:32px;color:#fff;font-weight:400}.ccs_Header_PageTitleArea>.css_PortalHeadtingDescription{font-size:14px;height:60px;font-family:’Segoe UI’,Tahoma,Helvetica,Sans-Serif;color:#fff}.ccs_Header_RightSideArea{display:table-cell;padding:2px}.ccs_Header_HomeLink{text-align:right;padding-right:20px;color:#fff}.ccs_Header_RightSideArea .ccs_Header_UserName{color:#fff; vertical-align: middle;}.ccs_Header_RightSideArea .ccs_Header_LogoutButton{vertical-align:middle;padding-left:5px;color:#fff}.ccs_Header_RightSideArea .ccs_Header_LogoutButton>a{color:#fff}.ccs_Header_RightSideArea .ccs_Header_TimeStamp{font-family:’Segoe UI’,Tahoma,Helvetica,Sans-Serif;color:#fff;line-height:18px;font-size:11pt;text-align:right!important;padding-top:5px;padding-right:15px}.ms-core-listMenu-root{padding-left:5px}.ccs_Header_MenuArea{height:40px;vertical-align:middle}.ccs_Clear{clear:both}@media only screen and (max-width:1023px){.ccs_LogoArea{width:80px;height:80px;padding:0}.ccs_Logo>img{width:80px;height:80px;background-size:70px 70px}.ccs_HeaderArea{margin-left:80px;height:80px;width:calc(100% – 80px)}.ccs_topHeader{height:40px;max-height: 40px;overflow: hidden;display: block;}.ccs_Header_PageTitleArea{padding:5px;margin-right:50px}.ccs_Header_PageTitleArea>.css_PortalHeading{font-size:24px!important}.ccs_Header_PageTitleArea>.css_PortalHeadtingDescription{display:none}.ccs_Header_RightSideArea{display:none}}.ms-breadcrumb-top{margin:0}.s4-itm-selected > .ms-vb-imgFirstCell.ms-vb-imgFirstCell {background-color: #008000;border-right-color: #008000;}
Add above CSS in “Extended CSS” section under “General Settings”.
Header HTML
<div class=”ccs_LogoArea”>
<a style=”text-decoration: none;” href=”/sites/nitro/ClaDevITP” accesskey=”h” class=”ccs_Logo”>[[Logo||Logo]]</a>
</div>
<div class=”ccs_HeaderArea”>
<div class=”ccs_HeaderRightTableArea”>
<div class=”ccs_topHeader”>
<div class=”ccs_Header_PageTitleArea”>
<div class=”css_PortalHeading”>[[Web Title||Web Title]]</div>
<div class=”css_PortalHeadtingDescription”>[[Web Description||Web Description]]</div>
</div>
<div class=”ccs_Header_RightSideArea”>
<div class=”ccs_Header_HomeLink”>
<span class=”ccs_Header_UserName”>[[Logged User Name||Logged User Name]]</span> |<span class=”ccs_Header_LogoutButton”>[[Logout Button||Logout Button]]</span>
</div>
<div class=”ccs_Header_TimeStamp”>[[Date Timer||Date Timer]]</div>
</div>
</div>
</div>
<div class=”ccs_HeaderRightTableArea”>
<div style=”display:table-row”>
<div style=”display:table-cell;vertical-align: top;”>
<div class=”ccs_Header_MenuArea”>[[Top Navigation Bar||Top Navigation Bar]]</div>
</div>
<div style=”display:table-cell;”>
<div>[[Search Box||Search Box]]</div>
</div>
</div>
</div>
</div>
<div class=”ccs_Clear”/>
Add above HTML in “Header HTML” control under Header section as shown below:
Header section
Sample output screenshot:
Customize header colors with CSS:
- To modify the header links dropdown icon and hover colors, add below CSS in “Extended CSS” in General Setting section in Modern branding
Custom CSS:
#CCSCustomizedHeaderRow li.static > .ccs-core-listMenu-item i {
color: ##HeaderSelectedLinkDropdownIconColor## !important;
font-size: 12pt !important;
}
#CCSCustomizedHeaderRow li.static > .ccs-core-listMenu-item i:hover, #CCSCustomizedHeaderRow li.static > .ccs-core-listMenu-item:hover i {
color: ##HeaderLinkHoverColor## !important;
}
In above, replace ## HeaderSelectedLinkDropdownIconColor##, ##HeaderLinkHoverColor## with hexadecimal colors:
Example:
#CCSCustomizedHeaderRow li.static > .ccs-core-listMenu-item i {
color: #e82217 !important;
font-size: 12pt !important;
}
#CCSCustomizedHeaderRow li.static > .ccs-core-listMenu-item i:hover, #CCSCustomizedHeaderRow li.static > .ccs-core-listMenu-item:hover i {
color: #21db40 !important;
}
Output:
2. To modify the custom sub links background color, add below CSS in Extended CSS section
.CCSCustomSubMenu {
background: ##HeaderBGColor## !important;
}
In above CSS, replace “##HeaderBGColor##” with hexadecimal color:
Example:
.CCSCustomSubMenu {
background: #4e8efc !important;
}
Output:
3. To modify the overflow header links buttons color, add below CSS.
li.CCSCustomTopNavMore > span.ms-Icon {
color: ##HeaderSelectedLinkColor##;
}
li.CCSCustomTopNavMore > span.ms-Icon:hover {
color: ##HeaderLinkHoverColor##;
background: ##HeaderLinkHoverBackgroundColor##;
border-color: ##HeaderLinkHoverborderColor##;
}
li.CCSCustomTopNavMore > span.ms-Icon {
border: 2px solid ##HeaderSelectedLinkColor##;
}
In above custom CSS, replace below placeholders:
##HeaderSelectedLinkColor##: Overflow links button color
##HeaderLinkHoverColor##: hover color for overflow button
##HeaderLinkHoverBackgroundColor##: hover color for overflow button background
## HeaderLinkHoverborderColor ##: hover color for overflow button border
Ex:
li.CCSCustomTopNavMore > span.ms-Icon {
color: #eb6f50;
}
li.CCSCustomTopNavMore > span.ms-Icon:hover {
color: #34e5eb;
background: #f255d8;
border-color: #77f27b;
}
li.CCSCustomTopNavMore > span.ms-Icon {
border: 2px solid #ecf547;
}
Output:
4. To modify the header background color, hover color and text color, add below CSS in “Extended CSS” section
Custom CSS:
div#CCSCustomizedHeaderRow {
background: ##HeaderBGColor##;
}
#CCSCustomizedHeaderRow ul li a:hover {
background: ##HeaderSelectedLinkhoverColor##;
}
#CCSCustomizedHeaderRow ul > li > a:hover .ccs-menu-item-text, #CCSCustomizedHeaderRow ul li a:hover .ccs-menu-item-text, #CCSCustomizedHeaderRow li a:hover i {
color: ##HeaderLinkTextHoverColor## !important;
}
In above CSS, replace below placeholders with hexadecimal color
##HeaderBGColor##: Header background color
##HeaderSelectedLinkhoverColor##: Hover color for selected header link
##HeaderLinkTextHoverColor##: Hover color for selected header link text
Ex:
div#CCSCustomizedHeaderRow {
background: #958eed;
}
#CCSCustomizedHeaderRow ul li a:hover {
background: #e61755;
}
#CCSCustomizedHeaderRow ul > li > a:hover .ccs-menu-item-text, #CCSCustomizedHeaderRow ul li a:hover .ccs-menu-item-text, #CCSCustomizedHeaderRow li a:hover i {
color: #b1f0bd !important;
}
Output:
