5

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.

Improve this question

6 Answers 6

Reset to default
5

If you don't need left navigation , I would request you to use Communication site template,in this there 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, as modern script editor , where you can inject your CSS , just like Classic in built script editor.

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

Improve this answer
2
  • can you give an example of replacing classes value by * .
    – Keshav Taurah
    Commented Nov 30, 2018 at 12:19
  • for example : class="gradientBox_1c643900 gradient_4e0f85cc disabled_4e0f85cc" use it as class="gradientBox_1c643900 gradient_*"
    – BaxD
    Commented Nov 30, 2018 at 12:39
2

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

Improve this answer
3
  • but in this case if am adding style to the homepage, i need to add this script editor to every subsite homepage
    – Keshav Taurah
    Commented Dec 3, 2018 at 5:04
  • Yes, we have to add the client web part to all subsite home pages, we can do this using code. docs.microsoft.com/en-us/sharepoint/dev/solution-guidance/…
    – LZ_MSFT
    Commented Dec 3, 2018 at 6:40
  • what about alternate css file like we used to do in classic sharepoint
    – Keshav Taurah
    Commented Dec 4, 2018 at 5:24
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>
Improve this answer
5
  • This won't work on modern pages.
    – Taran Goel
    Commented Dec 1, 2018 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.
    – BaxD
    Commented Dec 1, 2018 at 12:00
  • @BultiDutta when i use this code in alternate css file it is not working..
    – Keshav Taurah
    Commented Dec 4, 2018 at 5:27
  • You have to write it in modern script editor - spfx app
    – BaxD
    Commented Dec 4, 2018 at 5:38
  • @BultiDutta please merge this answer with your previous answer then. :)
    – Taran Goel
    Commented Feb 6, 2019 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?

Improve this answer
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.

Improve this answer
0

IF anyone is still trying to get this work i used the

link

and this code and it worked:

<style>
    .ms-HubNav{ display:none; }
</style>

I had to find this Div target by digging through the code on Chrome Developer tools and findin

Improve this answer

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.