How can we help you today?

How to Prevent SharePoint Header Size Change (Disable Shy Header) on Scroll on Modern SharePoint Sites

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:
Compact Layout
  • Standard layout:
Standard Layout
  • Extended layout:
Extended Layout
After scroll
  • Minimal layout:
Minimal Layout

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 applying the solution


After applying the solution

It is possible to achieve this result by adding some Custom CSS to the ShortPoint Theme Builder. Let's get started.


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:

Go to Utilities

Select Custom CSS: 

Go to Custom CSS

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

Paste the custom CSS code

Save your customizations by clicking Apply (1), then Publish (2) button.

Click Apply and Publish button


That's it. Now, the SharePoint header will change its size and will not move on scroll:

Final Result

Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 11 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more