Forum Discussion

gmorken's avatar
gmorken
Copper Contributor
Nov 08, 2020

Hiding siteheader and shyheader casues flickering when scrolling

Hi!

I know that it is not best practice from Microsoft to hide the header but this is just for our local intranet where we are trying to build a custom mega menu with an application customizer.

 

What we are doing is in the oninit of the webpart we are hiding the siteheader and shyheader wich is working fine. But the sideeffects are that the page is kind of "jumpy/flickering" when we scroll to bottom and top.

 

the code for hiding the elements is:

    const cssShyHeader = '[data-automationid="ShyHeader"]{display:none !important}';
    const cssSiteHeader = '[data-automationid="SiteHeader"]{display:none !important}';
    const cssHubNav = '.ms-HubNav{display:none !important}';
    const head = document.getElementsByTagName("head")[0] || document.documentElement;
    let customStyle = document.createElement("style");
    head.appendChild(customStyle);
    
    customStyle.title = "customcss";
    customStyle.type = "text/css";
    customStyle.appendChild(document.createTextNode(cssSiteHeader));
    customStyle.appendChild(document.createTextNode(cssHubNav));
    customStyle.appendChild(document.createTextNode(cssShyHeader));

 

Is there some default css animation we can get rid of?

 

 

  • Tonno4's avatar
    Tonno4
    Copper Contributor
    Dec 29, 2021
    Hi, you can hide the ShyHeader with that code and there is no flickering.
    Just Replace the header id matching your´s.
    <style>
    div .shyHeader-71{
    display:none !important;
    }
    </style>

    bye
  • elkolorado's avatar
    elkolorado
    Copper Contributor
    Mar 14, 2024

    gmorken 

    Avail, here is ur 2024 code... to disable the header, and the flickering.

    <script>
// disable flickering after hiding the header & shy header
window['__shyConductor']._totalHeightDifference = 0;
</script>

<style>
#spSiteHeader /* disable shy & page header bar */ {
display: none !important;
}

/* optional cleanup */
#sp-appBar, /* disable left nav bar */
#spCommandBar, /* disable command bar */
[data-automation-id=pageHeader] /* disable title bar */
{
display: none !important;
}
</style>


    The _shyConductor is object that contains all functions for the shy header inside Microsoft Sharepoint Page. By setting heightDifference to 0, we are just quickly ignoring any change to update the scrollTop. You could use any other function of shyHeader instance to disable that as well, but I found this the simplest trick in the book.

    Helped? Follow me on github.com/elkolorado

Resources