0

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?

2 Answers 2

0

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

1
  • Thanks for your answer. This means that I have to apply the extension on all the sites under Hub Nav which user clicks. Instead I was seeing if there is workaround for fixing the carrying over of display none to other sites.
    – ssspfx
    Aug 27, 2020 at 14:30
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.