Display the Title Row (Top Navigation) in the Search Centers of SharePoint 2013

February 13, 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

Standard SharePoint 2013 Title Row

Search Center Heading - Title Row is Hidden

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:

If you are using jQuery, you can use this:

Result

Search Center with the Title Row

Search Center with the Title Row

Updates

10/06/2013

Xin Zhang mentioned a problem when using the script in firefox. The two code blocks are updated to support firefox, the lines that are added to the JavaScript blocks are highlighted.

Comments