Removing The Header on SharePoint Online Modern Pages
In SharePoint Online you will find two styles of SharePoint pages: classic and modern. Classic pages are the standard SharePoint pages we have known for many years. Modern pages are the new responsive design and it’s clear that modern pages are the future direction for SharePoint. Modern pages are built on the new SharePoint Framework development model and new features and templates were announced at the recent SharePoint Virtual Summit.
On a SharePoint Online site, if you click the settings menu and click the ‘add a page’ menu item it will create a new modern page and open it in edit mode. Looks great at first, but the most common reaction from clients and business users I work with is they want to get rid of the rather large header on the top of the page.
But modern pages are very locked down and you don’t have an option to remove the header through the page properties or settings. (and modern pages don’t have a script editor web part so you can’t apply your own css to hide the page header).
Fear not! There is a fairly straight forward no code solution to get rid of the header and keep your page out of the box.
If you haven’t already done so, click the ‘save and close’ button on your new page. You don’t need to publish the page at this point.
Next, open the site in SharePoint Designer 2013. Open the Site Pages document library and open your new modern page. Click the ‘Edit File’ link on the page screen.
Click ‘Yes’ at the prompt.
Next, you will find a line with the phrase ‘PageLayoutType’. On this line, delete the word Article, and replace it with the word Home.
Change to
Save the page in SharePoint Designer. Then go back to your browser and edit the page again, no header!
Then if you want to do additional header-less pages on that site you can copy the page you fixed in the site pages document library, you don’t have to go through the entire process again.
I like this solution because you can use SharePoint Designer to update a property you can’t get to through the browser. And we’re staying completely out of the box, we’re just changing from one out of the box modern page template to another. (you may recognize the ‘Home’ modern page layout from the SharePoint site home page on Office 365 groups.)
Sentiment Analysis on SharePoint Data Using Microsoft Flow
Calling Microsoft Flow From A SharePoint Designer Workflow
SharePoint Online Column Formatting
About Author
Frank Stadler
Based out of Dallas, TX area. .NET based web developer LinkedIn Profile Twitter Page
Hi Frank,
Thanks for your article. I just tried this on a O365 SharePoint “Site Page” and instead of removing the Header that is the same across most SharePoint pages on that site, it removed the customized body of the “Site Page”. Any suggestions ?
Terry Clancy
ClanceZ
you should be able to get your page’s content back by going into the pages document library and doing a right click version history to restore a previous version. This can be used to back out both content and design changes.
I do typically do this procedure first and then build the page content. I’ve used this approach on a few different tenants and it seems to work pretty consistently for me if I do this as part of the initial site setup. I’m not able to reproduce your issue, when I apply this approach to an existing page it preserves the content and layout.
It sounds almost like you’re editing the master page instead of just an instance of the page. As with all ‘unofficial’ approaches, proceed with caution.
Thanks for your responce. I have now got your soluition to work. I think the problem that I had was that I did not follow your instructions precisely to edit in browser and then click the ‘save and close’ but NOT publish before editing in SharePoint designer and then after using SPF edit and Publish the page.
Unfotunatly in the end this did not do exactly what I needed, I have a SharePoint “Site Page” which shows both a standard site wide header and a page specific header. I want to hide the site wide header but leave the page specific header in place. Your solution actually removed both headers. Any other suggestions would be appreciated.
ok, so you’re dealing with some kind of app that is looking for the out of the box header html and then inserts it’s own menu for the ‘global header’. Since that’s not out of the box, there’s not a standard answer. You can look at the site contents screen of your site to see if you see an app for the header and remove that app. you could also look at site settings –> site app permissions, if there’s something out there for the header app you could revoke it’s permissions. You could also check under site features and site collection features for some kind of global navigation app and disable it.
Depending on your permissions, this may be something your tenant administrator installed and you may not be able to remove. The steps above are ways to troubleshoot it. A work around could be to remove the header via my procedure and then add a text section single column left aligned at the top of the page, that would effective look like the out of the box header.
So those are a few thoughts.
I have just tested on Sharepoint Online and works like a charm. This was a requirement in my company since several weeks ago and it’s amazing how easy can be solved in a few minutes (of course, only possible after knowing where to apply the change thanks to Frank Stadler)