By default, the SharePoint top navigation includes a link to the landing page. This "Home" link takes up space and isn't always useful, especially if you use the site logo for the same purpose!
Sometimes the best solution can be to make changes in the master page or generate the nav from a list, but from time to time, the easiest approach was just to hide that first node with CSS. In SharePoint 2010, you'd end up using something like:
.s4-tn li.static > a{
display: none !important;
}
.s4-tn li.static > ul a{
display: block !important;
}
In SharePoint 2013, styles have changed. Here's the new class:
.ms-core-listMenu-horizontalBox li.static > a{
display: none !important;
}
.ms-core-listMenu-horizontalBox li.static > ul a{
display: block !important;
}
Thank you
ReplyDeleteShort but good
ReplyDeleteExcellent. Thanks!
ReplyDeletebut in which folder should I put this CSS code? can you give me the location of the css file?
ReplyDelete@srdjan you can create css at any location with is above code and just put css reference to your master page
ReplyDeleteThank you for your answer.
DeleteI created the CSS file with the following code:
style type="text/css"
.ms-core-listMenu-horizontalBox li.static > a
{
display: none !important;
}
.ms-core-listMenu-horizontalBox li.static > ul a
{
display: block !important;
}
/style
Could you tell me where should I put the reference to this file?
I am using seattle theme.
Should I put the reference in head or the body part?
Until I found this post, every time I tried to hide the starting node, I ended up hiding the entire top links bar. Thanks!
ReplyDeleteThank you -I hate sharepoint
ReplyDeletecan someone please explain step by step on how to accomplish this, as i dont understand what is said here
ReplyDeleteSee the comment I just added. It should help you out.
DeleteThis comment has been removed by the author.
ReplyDeleteTo help anyone else struggling to apply this css:
ReplyDelete1. put the css code inside of a text editor such as textpad or notepad.
2. Save the file with a .ccs extension.
3. Publish that file to a SharePoint library (I used site assets)
4. Go to site settings, and then Master Page under Look and Feel.
5. Expand Alternate CSS URL, and click 'Specify a CSS file to be used by this site and all sites that inherit from it'
6. Browse to the .css file and upload.
7. Hit the Reset all subsites to inherit this alternate CSS URL checkbox if so desired, and click ok.
Boom - more complete write up. Thanks for the code!
In step 2, i meant to say .css
DeleteThis broke the NAV on my page (it vanished), any idea why?
ReplyDeleteI used the code to hide left nav but the "Home Page" is showing on top of page. What code can be used to hide this in SP 2013?
ReplyDeleteHi,
ReplyDeleteI need help to change the name of "Home" link in SharePoint 2010.
This comment has been removed by the author.
ReplyDeleteHow can you change this in the Master page rather than through CSS?
ReplyDeletePlace the following in a Custom CSS:
ReplyDelete.ms-core-listMenu-horizontalBox #firstElement > a{
display: none !important;
}
That did the job for me on a Sharepoint Online (2013) site. Classes can be used several times, while ID's (#) are used only once, if applied properly. Since the first item on the menu is tagged with ID=firstElement, you can safely disable it without the risk of being used elsewhere.