A hand holding open a color book with pages to display multiple colors.Have you ever wondered which site header to use on your site to provide the most impact? Use these tips and tricks for designing beautiful headers to help make your SharePoint site shine.

One of my favorite quotes about design comes from Mad Men. This quote says a lot about how we think of site headers for SharePoint Online and how we create layouts.

“Make it simple, but significant.” – Don Draper, Mad Men, Season 4, Episode 6, “Waldorf Stories”

Hand holds open a color swatch book displaying multiple colors.

Branding your site header is an easy way to provide impact and expression to your SharePoint sites. Over the years we have heard great feedback from our customers that they would like more options for site headers. With this feedback in mind, we recently introduced 2 new site header layouts – Minimal and Extended. But this is not all we heard, so we added more header configuration options giving you more control over the elements in your headers. These simple and small changes can have a big impact on the look of your site. Each header can be used for different reasons and we want to go through a few of these options and recommendations with you.

By combining site logos, site headers, footers, and themes you can make striking changes to emphasize your brand within each site. Picking the right combination of options amongst the site header layouts and configuration options can emphasize or minimize the impact and focus of the brand and content.

When you begin to think about your site header, it is important to first understand what information is available to be included in the header. With this knowledge you can make informed choices about the layout and configuration options to truly make your brand shine on each site.

Content can be included in site headers:

With all these potential items that could be included in your site header, you will need to decide for each site how you want to present the content and intended use of your site. With these factors in mind, you can make the right choices for layout and configuration. For many sites, the focus might be the brand or showcasing a new concept, while for others the focus might be the contents of the site and information on the pages. Each header layout can assist in promoting the intent of your site and highlight your brand at the same time.

Let us start with the common header elements, once you determine the purpose of your site and select the theme that you wish to utilize, you can look towards the site header to provide information and impact for the site. The theme selected is an important related factor for your site header as it will determine the colors utilized in the header. You will make these selections through the Change the Look panel accessed through the Settings gear.

Minimal Header

SharePoint Minimal site header

The Minimal Header layout option is our smallest site header and will work best for sites where you want to provide a clear focus on the content or the hub navigation. This header utilizes the smallest height and the smallest site logo size possible. With the minimal nature of this header, it provides the least visual weight and impact on your site.

To best create a minimal header, we have minimized the content that is included in this header layout, you will find additional content in the overflow menu to the right of the header, including the multilingual language selector. The minimal header should be used very strategically on sites where this restricted content in the header will work best.

It is important to note that if you choose to use this minimal header layout for a multilingual sites the language selector is included in the ellipsis overflow menu.

Compact Header

SharePoint Compact site header

If you use the site header layout of Compact, you will see an increase in the height of the site header and a single line of content across the header area. This layout option is best suited for most of your communication and team sites, allowing you to optimize the space afforded for your site content with a smaller height that includes the most information. Due to the flexibility of the compact header, it is the default header layout provisioned with each site.

With the compact layout you can provide additional wayfinding and identifying information by uploading a site logo. The site header background color, you can also add visual impact to your header with a header background color from your selected site theme.

Standard Header

SharePoint Standard site header

The standard header layout increases the height of the site header and splits the site information into multiple lines for display purposes. This header layout is a good choice if you have a site not connected to a hub and have additional room to allow for the larger height.

You can also optimize the standard site header with a header background color from your site theme and site logo to highlight the site and give emphasis to site specific wayfinding.

Extended Header

SharePoint Extended site header

The extended header layout is the largest layout option that introduces a secondary area to provide a separate area for a background image or color. This layout should be utilized for sites that want to provide impact or become a showcase site for your organization brand or concept within your organization. For additional visual weight we have increased the maximum width site logo that can be included to provide additional impact and introduced the ability to align the logo left, center or right within the header. The site information and navigation (depending on site type) are moved below to a separate site theme colored bar for increased accessibility on these items.

There are some notable exceptions in behavior based on site type for the extended header. If your site is a Hub site and has been designated as Home, and you are utilizing the Extended Header, the site navigation will be removed. For these Hub + Home sites the Hub navigation bar will move to the bottom of the background image as the only navigation presented. If you are utilizing a team site template, you will notice that the navigation will continue to be presented on the left as the quick launch and not in the site header.

As you begin to explore using the extended header, there are a few design recommendations for how you should think about and design the extended header background images. These images will need to scale to fit both wide and small screens, without conflicts and introducing accessibility issues for the site logo and site title. We encourage you to think about these header background images in 3 distinct categories:

Brand Pattern:

By utilizing a pattern that is related to your brand in either shapes or colors, you can create a design that is visually appealing, while maintaining the appropriate open spaces for the site logo to avoid conflicts and potential accessibility issues with the site logo. These patterns will add great visual detail to your site.

Tips for creating brand patterns for your site headers:

\n
1. Use colors that are a part of your brand and related to the site theme.
\n
2. Repeating shapes, colors, and details can provide interest and simplicity.
\n
3. Keep your pattern simple.
\n

Brand Pattern samples for extended SharePoint site header

Brand Photography:

A picture speaks a thousand words as they say, however photography is especially challenging in reduced height spaces like the site header that will need to scale for large and small width screens. Utilizing photography tied to your brand allows you to be specific on the items included in the photographs so that it relates to the content within the site, while also controlling the amount of visual focal draws within the image to keep clear focus on the site logo and site title.

Tips for picking photography for your site headers:

\n
1. Avoid the introduction of numerous visual elements.
\n
2. Keep colors to a minimum.
\n
3. Be aware of color contrasts.
\n
4. Provide clear open space for your site logo and site title.
\n

Brand Illustration:

By creating an illustration for your site header, you can tie the content of the header to the visual elements of your image in a noticeably clear way. By custom tailoring an illustration for your brand and the site contents, you are able to increase the connection impact of your visual elements to the subject of the site.

Tips for brand illustrations in your site header:

\n
1. Minimize colors utilized in your illustration.
\n
2. Create or use illustrations that reinforce the content or focus of your site.
\n

Brand Illustration samples SharePoint extended site header

Brand can play a vital role in your portals and sites; these options will allow you to create the perfect introduction of your site to your users. As you can see, all these changes to site headers really took Don Draper's advice to heart. While they are simple, they are significant.

No matter if you want to make a big splash, or provide minimal interruption, you cannot go wrong with any of these site header options. The additional configuration options for the site title and site logo thumbnail allow you to control the presentation of the visual and text elements for your site and brand throughout the SharePoint features. With these great options for site headers, we are excited to see the great ways that you use each of these layouts to enhance your SharePoint portals and experiences.

Want to learn even more about designing beautiful SharePoint sites, watch a full session in the Video

Hub: 

One of my favorite quotes about design comes from Mad Men. This quote says a lot about how we think of site headers for SharePoint Online and how we create layouts.

“Make it simple, but significant.” – Don Draper, Mad Men, Season 4, Episode 6, “Waldorf Stories”

Hand holds open a color swatch book displaying multiple colors.

Branding your site header is an easy way to provide impact and expression to your SharePoint sites. Over the years we have heard great feedback from our customers that they would like more options for site headers. With this feedback in mind, we recently introduced 2 new site header layouts – Minimal and Extended. But this is not all we heard, so we added more header configuration options giving you more control over the elements in your headers. These simple and small changes can have a big impact on the look of your site. Each header can be used for different reasons and we want to go through a few of these options and recommendations with you.

By combining site logos, site headers, footers, and themes you can make striking changes to emphasize your brand within each site. Picking the right combination of options amongst the site header layouts and configuration options can emphasize or minimize the impact and focus of the brand and content.

When you begin to think about your site header, it is important to first understand what information is available to be included in the header. With this knowledge you can make informed choices about the layout and configuration options to truly make your brand shine on each site.

Content can be included in site headers:

With all these potential items that could be included in your site header, you will need to decide for each site how you want to present the content and intended use of your site. With these factors in mind, you can make the right choices for layout and configuration. For many sites, the focus might be the brand or showcasing a new concept, while for others the focus might be the contents of the site and information on the pages. Each header layout can assist in promoting the intent of your site and highlight your brand at the same time.

Let us start with the common header elements, once you determine the purpose of your site and select the theme that you wish to utilize, you can look towards the site header to provide information and impact for the site. The theme selected is an important related factor for your site header as it will determine the colors utilized in the header. You will make these selections through the Change the Look panel accessed through the Settings gear.

Minimal Header

SharePoint Minimal site header

The Minimal Header layout option is our smallest site header and will work best for sites where you want to provide a clear focus on the content or the hub navigation. This header utilizes the smallest height and the smallest site logo size possible. With the minimal nature of this header, it provides the least visual weight and impact on your site.

To best create a minimal header, we have minimized the content that is included in this header layout, you will find additional content in the overflow menu to the right of the header, including the multilingual language selector. The minimal header should be used very strategically on sites where this restricted content in the header will work best.

It is important to note that if you choose to use this minimal header layout for a multilingual sites the language selector is included in the ellipsis overflow menu.

Compact Header

SharePoint Compact site header

If you use the site header layout of Compact, you will see an increase in the height of the site header and a single line of content across the header area. This layout option is best suited for most of your communication and team sites, allowing you to optimize the space afforded for your site content with a smaller height that includes the most information. Due to the flexibility of the compact header, it is the default header layout provisioned with each site.

With the compact layout you can provide additional wayfinding and identifying information by uploading a site logo. The site header background color, you can also add visual impact to your header with a header background color from your selected site theme.

Standard Header

SharePoint Standard site header

The standard header layout increases the height of the site header and splits the site information into multiple lines for display purposes. This header layout is a good choice if you have a site not connected to a hub and have additional room to allow for the larger height.

You can also optimize the standard site header with a header background color from your site theme and site logo to highlight the site and give emphasis to site specific wayfinding.

Extended Header

SharePoint Extended site header

The extended header layout is the largest layout option that introduces a secondary area to provide a separate area for a background image or color. This layout should be utilized for sites that want to provide impact or become a showcase site for your organization brand or concept within your organization. For additional visual weight we have increased the maximum width site logo that can be included to provide additional impact and introduced the ability to align the logo left, center or right within the header. The site information and navigation (depending on site type) are moved below to a separate site theme colored bar for increased accessibility on these items.

There are some notable exceptions in behavior based on site type for the extended header. If your site is a Hub site and has been designated as Home, and you are utilizing the Extended Header, the site navigation will be removed. For these Hub + Home sites the Hub navigation bar will move to the bottom of the background image as the only navigation presented. If you are utilizing a team site template, you will notice that the navigation will continue to be presented on the left as the quick launch and not in the site header.

As you begin to explore using the extended header, there are a few design recommendations for how you should think about and design the extended header background images. These images will need to scale to fit both wide and small screens, without conflicts and introducing accessibility issues for the site logo and site title. We encourage you to think about these header background images in 3 distinct categories:

Brand Pattern:

By utilizing a pattern that is related to your brand in either shapes or colors, you can create a design that is visually appealing, while maintaining the appropriate open spaces for the site logo to avoid conflicts and potential accessibility issues with the site logo. These patterns will add great visual detail to your site.

Tips for creating brand patterns for your site headers:

\n
1. Use colors that are a part of your brand and related to the site theme.
\n
2. Repeating shapes, colors, and details can provide interest and simplicity.
\n
3. Keep your pattern simple.
\n

Brand Pattern samples for extended SharePoint site header

Brand Photography:

A picture speaks a thousand words as they say, however photography is especially challenging in reduced height spaces like the site header that will need to scale for large and small width screens. Utilizing photography tied to your brand allows you to be specific on the items included in the photographs so that it relates to the content within the site, while also controlling the amount of visual focal draws within the image to keep clear focus on the site logo and site title.

Tips for picking photography for your site headers:

\n
1. Avoid the introduction of numerous visual elements.
\n
2. Keep colors to a minimum.
\n
3. Be aware of color contrasts.
\n
4. Provide clear open space for your site logo and site title.
\n

Brand Illustration:

By creating an illustration for your site header, you can tie the content of the header to the visual elements of your image in a noticeably clear way. By custom tailoring an illustration for your brand and the site contents, you are able to increase the connection impact of your visual elements to the subject of the site.

Tips for brand illustrations in your site header:

\n
1. Minimize colors utilized in your illustration.
\n
2. Create or use illustrations that reinforce the content or focus of your site.
\n

Brand Illustration samples SharePoint extended site header

Brand can play a vital role in your portals and sites; these options will allow you to create the perfect introduction of your site to your users. As you can see, all these changes to site headers really took Don Draper's advice to heart. While they are simple, they are significant.

No matter if you want to make a big splash, or provide minimal interruption, you cannot go wrong with any of these site header options. The additional configuration options for the site title and site logo thumbnail allow you to control the presentation of the visual and text elements for your site and brand throughout the SharePoint features. With these great options for site headers, we are excited to see the great ways that you use each of these layouts to enhance your SharePoint portals and experiences.

Want to learn even more about designing beautiful SharePoint sites, watch a full session in the Video

Hub: 

A hand holding open a color book with pages to display multiple colors.Have you ever wondered which site header to use on your site to provide the most impact? Use these tips and tricks for designing beautiful headers to help make your SharePoint site shine.

Jenny_Bruce yes, I have the site as a Communications site and Im still not getting a full width component option. And I can see the \"Change the Look\" settings, but I am not given all the options that I see in this tutorial.

I think Microsoft needs to be a little clearer about the home site branding capabilities vs. other SharePoint online sites. The fact that you cannot display site navigation for a home site while using the Extended Header makes literally no sense. I've built this beautiful intranet, registered it as a home site (following best practices), but now I'm not able to show my users local site navigation, and that is by design? Why exactly is that by design? How is it helpful to the user to not show both hub site and local site navigation with the Extended Header. 

Here is Microsoft's explanation: \"There are some notable exceptions in behavior based on site type for the extended header. If your site is a Hub site and has been designated as Home, and you are utilizing the Extended Header, the site navigation will be removed. For these Hub + Home sites the Hub navigation bar will move to the bottom of the background image as the only navigation presented.\"

Great summary, but why?

Friend if you want to close 5paisa account follow this links, How to Delete 5paisa Account.

Here is my Blog How to Create a Website with Power Page in 2023

mas787 - yes you can update many things programmatically in site header.  Following are some posts from folk who regularly blog about such things :

SharePoint diary (Salaudeen Rajack) article on changing site logo - scroll down to heading \"SharePoint Online PowerShell to change logo\" 

C# Corner article by Akash Sonare - PnP PowerShell Update SharePoint site logo

LindsayNewhouse - Is your site using the Team site template? If so the Full-width section for page layout is only available in the Communication site template.  

Also, if you are not seeing the Change the look option in the Settings menu

(this is where you find header, navigation, theme colors options etc) you don't have the required permissions to access these settings - speak to your company's SharePoint Administrator.

I don't have many of the features you have when building pages, such as full-width columns, and specific headers, colors, and font sizes, etc. How do I get those features to show up in Sharepoint?

Hi All,

So we have two options of logos 

1. Site Logo 2. Site Logo Thumbnail

I wanted to put different images for Site Logo and Site Logo Thumbnail using programmatic way(powershell or c#).

Does anyone know how we can do that in Programmatic way.

Jenny Bruce, Cathy_Dew can you please help with this.

Thanks.

Hi Diana_Robinson 

The User Voice service was replaced by Microsoft's new  Feedback Community a while ago.  

You can apply one of your theme colours to the right vertical column if you want to have something that looks like a magazine sidebar - this setting is in the section layout tools .  Unfortunately you can't at this stage apply a background to a single column in the other page layouts.  However, you can add other sections to your page and apply a background to those which may help you achieve your desired look and feel. 

The new Feedback community has a number of existing suggestions related to background colours that you might like to upvote.

The User Voice page doesn't seem to be functional at the moment. But I'm wondering if there's a way to add a background color to one column of a multicolumn web part so that it appears like a magazine sidebar. Also, is there a way to add more space between columns or add a vertical rule to provide more separation between columns? I know there are divider and spacer options to provide separation above or below web parts, but sometimes columns need more air between them. Thanks!

Hi mas787  - I understand you can do this with PnP PowerShell Set-PnPWebHeader.

At an AMA I went to recently this is still more or less in 'preview' as you need to be using the 'Nightly release' version of PnP PowerShell.