Hide element using css for a modern page

Question

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.

BaxD · Accepted Answer · 2019-05-30T09:49:11.750

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.

edited May 30 '19 at 09:49

answered Nov 30 '18 at 11:43

BaxD

124
9

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_*" – BaxD Nov 30 '18 at 12:39

score 2 · Answer 2 · answered Dec 03 '18 at 02:00

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

answered Dec 03 '18 at 02:00

LZ_MSFT

6,219
1
7
7

but in this case if am adding style to the homepage, i need to add this script editor to every subsite homepage – Keshav Taurah Dec 03 '18 at 05:04
Yes, we have to add the client web part to all subsite home pages, we can do this using code. https://docs.microsoft.com/en-us/sharepoint/dev/solution-guidance/modern-experience-customizations-customize-pages – LZ_MSFT Dec 03 '18 at 06:40
what about alternate css file like we used to do in classic sharepoint – Keshav Taurah Dec 04 '18 at 05:24

BaxD · Answer 3 · 2018-12-01T09:05:55.903

1

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>

edited Dec 01 '18 at 09:05

answered Nov 30 '18 at 12:45

BaxD

124
9

This won't work on modern pages. – Taran Goel Dec 01 '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.
– BaxD Dec 01 '18 at 12:00
@BultiDutta when i use this code in alternate css file it is not working.. – Keshav Taurah Dec 04 '18 at 05:27
You have to write it in modern script editor - spfx app – BaxD Dec 04 '18 at 05:38
@BultiDutta please merge this answer with your previous answer then. :) – Taran Goel Feb 06 '19 at 18:32

score 0 · Answer 4 · answered Dec 01 '18 at 11:01

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?

score 0 · Answer 5 · answered Dec 01 '18 at 11:55

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.

answered Dec 01 '18 at 11:55

Taran Goel

4,474
5
20
44

score 0 · Answer 6 · edited Jun 08 '20 at 10:51

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

edited Jun 08 '20 at 10:51

Gaurravs

3,558
12
22
33

answered Jun 08 '20 at 10:19

Mouseman85

1
1

Hide element using css for a modern page

6 Answers6

Linked