4

I have a left navigation item that i want to hide using css. I am using css alternate file to apply the css but in vain. It works fine in classic page but with modern it doesn't work at all.

I found that there was a modern script editor from spfx sample but did not try it yet to see if it works.

3

If you don't need left navigation, I would recommend you use the Communication site template, since it has no left navigation.

Now, for your question the exact answer is, there has no other way apart from SPFX app to hide the left navigation.

You need to build a SPFX app using a modern script editor, where you can inject your CSS just like the Classic built-in script editor.

But keep in mind, for modern page classes values (numbers) changes, use * in place of number.

  • can you give an example of replacing classes value by * . – Keshav Taurah Nov 30 '18 at 12:19
  • for example : class="gradientBox_1c643900 gradient_4e0f85cc disabled_4e0f85cc" use it as class="gradientBox_1c643900 gradient_*" – Bulti Dutta Nov 30 '18 at 12:39
1

We can install SPFx React Script editor web part and add the web part to the modern page, and then add CSS style into the web part to achieve your requirement.

To install the React Script Editor web part, you can refer to the article below.

Install SPFx React Script editor web part as tenant-scoped solution into Sharepoint Online

Source code: react-script-editor

0

I do have the ready made code for you, use this as per your requirement , it will hide left navigation and page name etc..

<style>
    .ms-siteLogoAcronym{ display:none; }
    .ms-siteLogoContainerOuterl{ display:none; }
    .ms-HorizontalNavItems{ display:none; }
    .ms-compositeHeader-addnCommands { display: none; }
    nav.ms-Nav { display: none; } 
    .ms-siteHeader-siteLogo { display: none; }
    .ms-searchux-searchbox { display: none; }
    #sp-socialbar{ display:none; } 
</style>
  • This won't work on modern pages. – Taran Goel Dec 1 '18 at 11:56
  • this is working code I have given here . And please read all the steps I had mentioned in the above comment , then you come to any solution. – Bulti Dutta Dec 1 '18 at 12:00
  • @BultiDutta when i use this code in alternate css file it is not working.. – Keshav Taurah Dec 4 '18 at 5:27
  • You have to write it in modern script editor - spfx app – Bulti Dutta Dec 4 '18 at 5:38
  • @BultiDutta please merge this answer with your previous answer then. :) – Taran Goel Feb 6 at 18:32
0

The code snippet web part will soon be available, ref the roadmap: https://www.microsoft.com/en-us/microsoft-365/roadmap?featureid=43780

This might let you embed code, but the wording of the description is a bit unclear so this might be just to show code - not run it.

It is (was) scheduled for release in November, so it shouldn't be far away.

If you cannot wait for this you can install the modern script editor web part you mention, or build your own solution that can host the css to hide the navigation elements. Maybe you have other requirements that could be added as well - e.g a custom site footer?

0

The only option you've right now till code snippet webpart is released is using SPFX extensions and adding custom css on the page. You can put restriction in code to configure where should this extension code should be executed.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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