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


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.



Result


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




Related articles: