Friday, 12 July 2013

SharePoint 2013 Hiding Site Collection Home Tabs

If you have a Site collection's logo in a top left hand corner, it works as a link to the Home Page.
Further, if you require a number of links to other sites in your top navigation menu, you could actually do with hiding this name tab menu so you have more room for adding links to the top navigation bar.

As per suggestions as well as due to my previous experience with SP2010 Server, I tried to edit a core CSS file by adding the following code to it. 

.s4-tn li.static $gt; a{
display: none !important;
.s4-tn li.static $gt; ul a{
display: block !important;

It worked like a charm in SP2010. In SP2013 it did not for me!
So I injected a following javascript into the page in Content Editor Web Part:

-where 'UK Accounts' was used instead of 'Home' as it is the name of my first home tab to hide. This approach is just looking for a text on the page and it hides it. You probably gather, it has some disadvantages too.

As you can see in the picture above, the phrase/name we are hiding on a page is also removed from Titles of web parts (e.g. Calendar), subjects names of the discussion posts (note a doted red line where 'UK Accounts' is present in the main body of a post- just the subject title is removed).
Overall, it is not very good approach don't you think? Especially when the phrase 'UK Accounts' may be used for other objects available on that page.
Going back to the original naming in SharePoint, the word 'Home' sounds like an appropriate word to be used for hiding a root site tab. I do not think users and admins will use this word to refer to any of their work.
So I changed the name of the home page to 'Home', then I modified my javascript to include 'Home' instead of 'UK Accounts'.
This is the result:

Part of the site collection logo contains a reference to the actual site collection so users will always know they are on the 'UK Accounts' pages.
When you dive deeper into the Site Collection pages, respective sites' root pages names would have to stay unchanged. They can no longer  be changed to 'Home' because users would again see UK Accounts - Home as opposed to UK Accounts - UK Budget for example on a Logo-Page title level.

Just in case, I posted in an MS SharePoint forum to ask whether there is someone out there willing to help explaining the CSS route as opposed to Javascript for hiding a home tab in SP2013. I also highlighted disadvantages of using javascript in my scenario. Read my comment to the first reply in the thread.


  1. to remove the breadcrumb links in SP 2013, you could use the following css

    #DeltaTopNavigation {
    display: none;

    that will hide any top-navigation links.


  2. css I used to resolve issue:

  3. i want to ask how to hide the tab logo of sharepoint 2013