Custom CSS hide O365 header carrying to new site when opened in same tab

Question

I have added a custom css spfx extension which simply hides the O365 header below HubNav modern. Now issue arises when user clicks on a link which opens in same tab, the site they navigate to is also having the css applied even though my spfx extension is applied to just the hub site home. The new site home page has header hidden, but clears off when refreshed.

Is there any way to clear the css by checking if the page is navigating away?

Any other ideas?

Answer 1

You could use js to adjust if the page is the target page,then use js to inject CSS.

if ((window.location.href.toLowerCase().indexOf('page') > 0))
    {
    
        var head = document.getElementsByTagName('head')[0];
        var link = document.createElement('link');
        link.href = 'https://contoso.sharepoint.com/sites/dev/Doc/testFolder/test.css';
        link.rel = 'stylesheet';
        link.type = 'text/css';
        head.appendChild(link);
    }

Demo:

https://github.com/Amos-IT/SharePoint-FrameWork-Demos/tree/master/react-application-injectjs-master

Answer 2

So we had a Microsoft ticket and the technician said that it may have been caused by recent outage of the HUBnav sub navigation which can be found in Microsoft admin center.