Hiding siteheader and shyheader casues flickering when scrolling

%3CLINGO-SUB%20id%3D%22lingo-sub-1865351%22%20slang%3D%22en-US%22%3EHiding%20siteheader%20and%20shyheader%20casues%20flickering%20when%20scrolling%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1865351%22%20slang%3D%22en-US%22%3E%3CP%3EHi!%3C%2FP%3E%3CP%3EI%20know%20that%20it%20is%20not%20best%20practice%20from%20Microsoft%20to%20hide%20the%20header%20but%20this%20is%20just%20for%20our%20local%20intranet%20where%20we%20are%20trying%20to%20build%20a%20custom%20mega%20menu%20with%20an%20application%20customizer.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhat%20we%20are%20doing%20is%20in%20the%20oninit%20of%20the%20webpart%20we%20are%20hiding%20the%20siteheader%20and%20shyheader%20wich%20is%20working%20fine.%20But%20the%20sideeffects%20are%20that%20the%20page%20is%20kind%20of%20%22jumpy%2Fflickering%22%20when%20we%20scroll%20to%20bottom%20and%20top.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Ethe%20code%20for%20hiding%20the%20elements%20is%3A%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-css%22%3E%3CCODE%3E%20%20%20%20const%20cssShyHeader%20%3D%20'%5Bdata-automationid%3D%22ShyHeader%22%5D%7Bdisplay%3Anone%20!important%7D'%3B%0A%20%20%20%20const%20cssSiteHeader%20%3D%20'%5Bdata-automationid%3D%22SiteHeader%22%5D%7Bdisplay%3Anone%20!important%7D'%3B%0A%20%20%20%20const%20cssHubNav%20%3D%20'.ms-HubNav%7Bdisplay%3Anone%20!important%7D'%3B%0A%20%20%20%20const%20head%20%3D%20document.getElementsByTagName(%22head%22)%5B0%5D%20%7C%7C%20document.documentElement%3B%0A%20%20%20%20let%20customStyle%20%3D%20document.createElement(%22style%22)%3B%0A%20%20%20%20head.appendChild(customStyle)%3B%0A%20%20%20%20%0A%20%20%20%20customStyle.title%20%3D%20%22customcss%22%3B%0A%20%20%20%20customStyle.type%20%3D%20%22text%2Fcss%22%3B%0A%20%20%20%20customStyle.appendChild(document.createTextNode(cssSiteHeader))%3B%0A%20%20%20%20customStyle.appendChild(document.createTextNode(cssHubNav))%3B%0A%20%20%20%20customStyle.appendChild(document.createTextNode(cssShyHeader))%3B%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIs%20there%20some%20default%20css%20animation%20we%20can%20get%20rid%20of%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
New Contributor

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?

 

 

0 Replies