1

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

1 Answer 1

0

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.

7
  • change the setting as you described will get applied to all the pages , while i want it to be for the home page only (as mentioned in my question) + i need to reload the page, because i am embedding some list views and those list views have custom formatting, and those custom formatting will not be applied unless we refresh the page, this is a limitation in list view formatting..
    – John John
    Mar 9, 2021 at 23:24
  • I have updated my answer. Mar 9, 2021 at 23:39
  • but adding ?env=Embedded to the url will not achieve all the custom css i defined
    – John John
    Mar 10, 2021 at 10:59
  • Unfortunately, using custom CSS to hide the navigation elements is not supported as stated in my answer. Mar 10, 2021 at 11:28
  • when you say it is not supported because the DOM elements might get changed in sharepoint,, but we can live with this fact and update the custom css accordingly...
    – John John
    Mar 10, 2021 at 11:30

Your Answer

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

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