Try ShortPoint nowIf 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. This is a sample of how your page will look like after following the steps in this tutorial:
Before:
After:
It is possible to achieve this result by adding some Custom CSS to the ShortPoint Theme Builder. Let's get started.
TABLE OF CONTENTS
- Before we begin
- Step 1. Prepare the Custom CSS solution
- Step 2. Apply the Custom CSS from the ShortPoint Theme Builder
- Result
Before we begin
- Make sure you are using SharePoint Online (Office 365) or SharePoint 2019 environment.
- Make sure you are using Modern SharePoint experience.
- It is important to always have the latest version installed. Visit our Download ShortPoint page and get the latest version of ShortPoint.
- Make sure you are a ShortPoint user with an active license.
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 Apply (1), then Publish (2) button.
Result
That's it. Now, the SharePoint header will change its size and will not move on scroll:
Related articles:
