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>&nbsp;|<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:

Description

Detailed Steps:

Custom CSS

Header HTML

Header section

Customize header colors with CSS:

About supportTeam