Slayte theme: How to move page title (breadcrumb near logo) to title zone

If you want to move SharePoint page title to Tile zone and achieve a smiliar look to the picture above, please follow the step described here.

Home page (example)

Site Settings > Masterpage (example)

1. Open the site using SharePoint designer.
2. Look for [ThemeName].css file, under Style Library.
   • Check out and edit the [ThemeName].css file.
   • Add the following code to the bottom of the file:

     #bt-pagetitle a { color: #FFF !important; }
     .BreadcrumbMain #bt-pagetitle h2 span,
     .BreadcrumbMain #bt-pagetitle p span { padding: 0; }
     .BreadcrumbMain #bt-pagetitle i.fa { padding: 0 3px; }
     
     @media (max-width: 993px) {
     	.BreadcrumbMain #bt-pagetitle h2 span,
     	.BreadcrumbMain #bt-pagetitle p span { display:inline-block; }
     	.BreadcrumbMain #bt-pagetitle h2 strong { line-height: 1.8em; }
     }
     
     

   • Save the .css file and check in (publish the major version).
3. Look for BTScripts.js file, under js folder.
   • Check out and edit BTScripts.js file.
   • Add the following code to the bottom of the file:

     jQuery(document).ready(function($){
     	var pagetitleImg = $('#pageTitle #DeltaPlaceHolderPageTitleInTitleArea img[src*="/images/spcommon.png"]');
     	$(pagetitleImg).parent('span').attr('style','');
     	$(pagetitleImg).replaceWith('');
     	var pagetitleHtml = '<h2><strong>'+$('#pageTitle #DeltaPlaceHolderPageTitleInTitleArea').html()+'</strong></h2>';
     	$(pagetitleHtml).appendTo("#bt-pagetitle");
     	$("#pageTitle").remove();
     });

   • Save the .js file and check in (publish the major version).
4. Go to the site and refresh the page. Your modifications should be visible.