Hide page title in SharePoint Online/2013/2016/2019 using jQuery or CSS

SharePoint Online training courses

In this SharePoint Online customization tutorial we will discuss: How page title appears in the SharePoint Online page? How to hide page title in SharePoint 2013 or SharePoint Online using CSS? How to hide page title in SharePoint 2013 or SharePoint Online using jQuery?

How page title appears on SharePoint online page?

The page title appears like below in a SharePoint web part page.

sharepoint 2013 hide page title using jquery
sharepoint 2013 hide page title using jquery

But sometimes we may not need the title on the page. Easily by using CSS and jQuery, we can hide the page title.

How to hide page title in SharePoint 2013 or SharePoint Online using CSS?

We can hide the page title using CSS in SharePoint 2013 or SharePoint online sites. Edit the web part page and add a script editor web part.

<style type="text/css">
#pageTitle
{
display:none;
}
</style>

In the Script editor web part, If the above CSS Code is not working to hide the Page Title, Then add the below css code and save the page.

<style type="text/css">
#pageContentTitle
{
display:none;
}
</style>

Once you save the page, the page title will not be visible like below.

sharepoint 2013 page hide title css
sharepoint 2013 page hide title css

How can we get Page Title ID in SharePoint?

In the above CSS code, we are providing the HTML element ID. This we can retrieve by doing an inspect element in the page. Right click on the page and click on Inspect. Then you can use the Arrow icon to get the “Page Title” ID.

In the below screenshot, You can see the Page Title ID as “pageContentTitle”.

how to hide page title in sharepoint
how to hide page title in sharepoint?

How to hide SharePoint page title

Similarly, we can also hide the page title using jQuery. You can put the below code inside a script editor web part.

Method-1:

<script language="javascript">
_spBodyOnLoadFunctionNames.push("HidePageTitle");
function HidePageTitle()
{
document.getElementById('pageTitle').style.visibility = 'hidden';
}
</script>

Method-2:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
jQuery('#pageTitle').remove();
});
</script>

Method-3:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#pageTitle').hide();
});
</script>

Read some Office 365 tutorials:

I hope this code will be helpful to hide page title in SharePoint 2013 or SharePoint online using css and jQuery.

Tags: hide page title sharepoint, hide page title sharepoint css, hide page title sharepoint 365, hide page title sharepoint 2016, hide page title sharepoint online, hide page title sharepoint 2013, hide page title sharepoint 2010, sharepoint 2016 remove page title, how to hide sharepoint page title

>