SharePoint 2013: Show title row in searchcenter

I was asked to integrate the top navigation in the search master page of SharePoint 2013. After some searching on the internet I found this great blog post:


http://www.estruyf.be/blog/display-the-title-row-top-navigation-in-the-search-centers-of-sharepoint-2013/

When working with the new search centers in SharePoint 2013, the first thing that you will notice is that the title row is different compared with for example a standard Team Site. Standard SharePoint 2013 Title Row Search Center Heading - Title Row is Hidden
As you can see, the title row (red box) where the top navigation should be, is replaced by the search icon and search box (orange box). The good news is that it is only hidden with some custom CSS on the results page, so you can easily make it visible again with the help of some JavaScript code.

Displaying the Title Row (Top Navigation) Solution

My solution is to first check if there is a refinement panel on the current page. When you know that there is a refinement panel on the page, you need to do four things:

1. Unhide the title row;
2. Setting a Page Title for the search center page, because this is empty;
3. Hiding the search icon;
4. Removing the top margin of the refinement panel.

The JavaScript code looks like this:

var refElm = document.getElementsByClassName('ms-searchCenter-refinement');
if (refElm.length > 0) {
  // Unhide the title row
  document.getElementById('s4-titlerow').setAttribute('style', 'display:block !important');
  // Set the Site Title
  document.getElementById('DeltaPlaceHolderPageTitleInTitleArea').innerHTML = 'Search Center';
  // Hide the search icon
  document.getElementById('searchIcon').style.display = 'none';
  // Remove the top margin 
  refElm[0].style.marginTop = 0;

  // The following lines are only needed for firefox
  var css = '#s4-bodyContainer #s4-titlerow { display: block !important; }',
      head = document.getElementsByTagName('head')[0],
      style = document.createElement('style');
  style.type = 'text/css';
  style.appendChild(document.createTextNode(css));
  head.appendChild(style);
}

If you are using jQuery, you can use this:

if ($('.ms-searchCenter-refinement').length > 0) {
  // Unhide the title row
  $('#s4-titlerow').attr('style', 'display:block !important');
  // Set the Site Title
  $('#DeltaPlaceHolderPageTitleInTitleArea').text('Search Center');
  // Hide the search icon
  $('#searchIcon').hide();
  // Remove the top margin 
  $('.ms-searchCenter-refinement').css('margin-top', '0');

  // The following line is only needed for firefox
  $('body').append('<style>#s4-titlerow { display: block !important; }</style');
}

Result

Search Center with the Title Row


Thanks to Elio Struyf for this great post!