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.

Before:

After:

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

TABLE OF CONTENTS

• This article is for you if
• Step 1. Prepare the Custom CSS solution
• Step 2. Apply the Custom CSS from the ShortPoint Theme Builder
• Result

This article is for you if

• 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.

Result

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

Related articles:

• Apply Custom CSS from ShortPoint Theme Builder
• How to Center the Header Logo in SharePoint Modern Experience
• How to Increase the Logo Size in Modern Pages (Office 365)