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 |
![]()
![]()
![]() |
After scroll |
![]() |
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: