SharePoint Online- Enable New Modern experience on root site collection

I really enjoy the new Modern experience of SharePoint Online communication sites; however, this requires creating a new SharePoint Online site collection at /sites/new site for the path. The client requested to have the root site branded with the Modern experience. However, while I was able to get the page to appear as the modern experience, I could not match it to the new modern communication sites template 100%. Please post any comments if you have any suggestions to convert the root site to match the communication site look and feel.

SharePoint Online Admin center settings

In the SharePoint Online Admin Center, make sure these settings are all default:

SharePoint Lists and Libraries experience New experience (auto detect)

SharePoint Online root site settings

Next, navigate to your root site,

Note how the Modern Experiences is only enabled on lists and libraries by default now days:

To create your first modern page, go to your Pages library. From here, you can create a new “Site Page” which contains all of the new modern page experiences:

Now you can add modern web parts, edit layouts, etc.:

Once finished, publish the page.

Setting modern page as homepage

Go to the pages library, then set the new modern page you published as the homepage by clicking “Make homepage”:

Removing left Quick Launch navigation, attempting to match a classic site to a modern communication site (fail)

The page is now modern, but the quick launch is showing. Modern communication sites do not have this.

This is not easy, unless you want to cheat with CSS. But my goal is to replicate the OOTB new Modern communication site experience on classic pages.

I compared the Site Features between a Classic site and a New Modern Communication Site:

The classic site has the following Site Features activated:

Classic Feature Status
Getting Started Active 
Mobile Browser View Active 
SharePoint Server Enterprise Site features Active 
SharePoint Server Publishing Active 
SharePoint Server Standard Site features Active 
Site Feed Active 
Site Notebook Active 
Team Collaboration Lists Active 
Wiki Page Home Page Active 

Maybe some of these features are the culprit, but nothing stood out.

When I compared the navigation, I found that the Communication sites use Current navigation across the top.

I thought this can be set by swapping the masterpage from “Seattle” to “Oslo” on the Classic site, but it did not affect the modern page I created on the classic site. Crazy.

I also noticed there is no Full Width web part on the modern experience:

So as close as you can get it OOTB is:

Update- how to add a full width web part

If you want to add full width content, you can insert a full-width layout/section to your modern page:

Once you add the full width section, you can add a Hero or Image web part. I dont like these, so I created a custom SPFx jQuery Bootstrap carousel and found a hack to allow the custom web part to appear in this special full width region:

SPFx web part full width hack:

Then, I can add custom HTML/CSS/jQuery to the full width region.

I sometimes copy the home.aspx over and over for subpages so I don’t get the big ugly image banner like I would get OOTB on subpages.

Here is an example of something our team has worked very hard on. I have 1 SPFx web part for the carousel (full width hack) and a SPFx extension for the footer. I sanitized it a lot and excluded a lot of the other web parts due to the data:

SPFx SharePoint full width web part carousel slider

Closing thoughts

If anyone knows how to move the left Quick Launch to under the Site title to match the Communication site template, let me know. Also post any comments about other differences you find between the Modern page on a classic site vs the new Modern communication sites (aside from the O365 group).

5 thoughts

  1. also, when you set a Modern page as the home page on the root site collection, your search (on the quick launch) only searches within the root site and not across the site collection. So Strange that Microsoft would let us create all of the Modern subsites but leave us with a Classic only home. It’s like they are working from the bottom up.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s