Hide first navigation node in top navigation in SharePoint 2013

Question

This is my first work with custom branding in 2013. I am attempting to hide the first node in the top navigation (not using Metadata navigation) using css, trying not to resort to jquery.

So my navigation might be Intranet | Departments | Services. I want to hide Intranet.

I am having trouble targeting the specific link for the first node.

<ul class="root ms-core-listMenu-root static">
   <li class="static">
     <a class="static menu-item ms-core-listMenu-item ms0displayInline ms-navedit-linkNode">'I want to remove this link'
     <ul>
       <li>
       <li>

I have tried to use various adjacent selectors and first:child but have had no luck with any of these. Most of the time I end up hiding the entire ul.

Has anyone successfully hidden this.

Answer 1

I was able to hide it using the following script

ul.ms-core-listMenu-root > li:first-child > a
{
    display: none !important; 
}

Answer 2

The child combinator selector will to do the trick:

ul.ms-core-listMenu-root > li > a { 
    display: none; 
}

You may need something more specific to override Microsoft's own core CSS. So if your navigation lives in a <div class="header">, then .header ul.ms-core-listMenu-root > li > a would do it.

Now, if anyone knows how to do this by configuring the navigation snippet in design manager (i.e. so it's never rendered to the page in the first place), I'd love to hear it.

Answer 3

Just put this element on a web scope feature and presto:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Control
    Sequence="50"
    Id="TopNavigationDataSource"
    ControlClass="Microsoft.SharePoint.Publishing.Navigation.PortalSiteMapDataSourceSwitch"
    ControlAssembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c">
    <Property Name="ID">topSiteMap</Property>
    <Property Name="SiteMapProvider">GlobalNavigation</Property>
    <Property Name="EnableViewState">false</Property>
    <Property Name="StartFromCurrentNode">true</Property>
    <Property Name="ShowStartingNode">false</Property>
    <Property Name="TreatStartingNodeAsCurrent">true</Property>
    <Property Name="TrimNonCurrentTypes">Heading</Property>
  </Control>
</Elements>

github