If you use a compact, standard or extended SharePoint header layout, you may have noticed that its size is changing on scroll to a minimal (shy header), like this:

Initial header size
  • Compact layout:

  • Standard layout:

  • Extended layout:

After scroll
  • Minimal layout:

In this article we will show you how to disable this behavior.



It is possible to achieve this result, adding some Custom CSS to the ShortPoint Theme Builder. Please, follow the steps below.


Before we begin

  • You are using SharePoint Online (Office 365) or SharePoint 2019 environment.
  • You are using Modern SharePoint experience.
  • You are a ShortPoint user and ShortPoint is installed on your SharePoint site(s). 

Step 1: Prepare the Custom CSS solution

For disabling SharePoint shy header behavior you will need to use this custom CSS code:

.shortpoint-proxy-theme-site-header [class*="mainHeader"] {
    position: relative !important;
    animation: none !important;
.shortpoint-proxy-theme-site-header [class*="logoCell"] {
    margin-right: 20px !important;
.shortpoint-proxy-theme-site-header [class*="shyHeader"] {
    display: none !important;

Copy it and proceed to the step 2.

Step 2: Apply the Custom CSS from the ShortPoint Theme Builder

Open the ShortPoint Theme Builder (Site contents > ShortPoint Dashboard > Theme Builder) 

In the Theme Builder menu, navigate to Utilities:

Select Custom CSS: 

Paste the copied CSS code from the step 1 to the Custom CSS field, and click Apply:

Save your customizations by clicking Publish button.


That's it. Now the SharePoint header size is not changed on scroll:

Related articles: