Add a custom CSS/JavaScript to the site's home modern page in a supported way

Question

I am working on a modern team site >> and for the home page ONLY, i want to:-

• Hide the Site navigation bar, left-hand side navigation, page title and modify the float to remove the white space on the left-hand side
• Add a JavaScript to reload the page each 5 minutes.

to achieve the above I added the SharePoint modern script web part @ https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-script-editor and I added this custom CSS + custom JavaScript:-

<style>

#SuiteNavWrapper,#pageHeader, #spSiteHeader,#spLeftNav,#WebPart.PageTitle.internal.cbe7b0a9-3504-44dd-a3a3-0e5cacd07788
{
display:none;

}

div[data-automation-id="pageHeader"]
{
display:none;

}


#SuiteNavWrapper
{display:none !important ;}

.a_b_50a7110f:not(.b_b_50a7110f) {

    margin: 2px 0;
}


div[data-automation-id="CanvasZone"] > div:first-child
{max-width:100% !important;}

#customchart
{
    
    transform= "rotate(90deg)"; 
    display="inline-block";  
    
}

.root-95 {
height:10px;}
</style>

<script>

setInterval(function() {
                  window.location.reload(true);
                }, 300000); 
                
                

</script>

and it achieved what i am looking for.. but based on my reading that my above approach of adding modern script editor web part and inside it to add custom CSS/JavaScript is not supported.. so my question is how i can apply the above custom CSS/JavaScript in a supported way inside the home page? thanks in advance for any help.

Regards

Answer 1

Hiding the top navigation bar, quick launch and page title using your own custom CSS is not supported. It can only be hidden using out of the box methods e.g. via a setting.

• The top navigation bar can not be hidden via a setting.
• The quick launch can be hidden by going to Site Settings > Navigation Elements and unticking the "Enable Quick Launch" option.
• To hide the page title, go to the home page > select the cog > Change the look > Header and deselect the "Site title visibility" option.
• The reloading of the page can be done via a SPFx extension, however I would not recommend doing this since it would probably cause a poor user experience.

Update: You can not hide top navigation, quick launch and page title for one page only using a setting. You can however add the URL parameter ?env=Embedded to your URL and the page will be loaded without the header, quick launch and footer.