SharePoint 2013 - SPLessons

Hide Recycle Bin and All Site Content links in Quick Launch of SharePoint using css

Home > > Tutorial
SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Hide Recycle Bin and All Site Content links in Quick Launch of SharePoint using css

Hide Recycle Bin and All Site Content links in Quick Launch of SharePoint using css

  Description:  If we want to hide the Quick Launch menu in the SharePoint we can do it without writing a single line of code by using out-of-box feature in SharePoint designer I will explain you how to hide Quick Launch menu in different ways in another tutorial now we will see how to hide Recycle Bin and All Site Content Links in Quick Launch menu of SharePoint using css, but unfortunately we cannot do it with out-of-box features of SharePoint so we just need to add a little CSS code to our master page.   [html] <ul class="s4-specialNavLinkList"> <li><a class="s4-rcycl" href="/sites/ecirular/_layouts/recyclebin.aspx">Recycle Bin</a></li> <li><a href="/sites/ecirular/_layouts/viewlsts.aspx">All Site Content</a></li> </ul> [/html] What are the Prerequisites?     Here we need to find out the a ID or Class of the above mentioned links, so with that ID or class we can easily apply our CSS code. First of all, we need to know a CSS property to hide the html tags from user interface. The Property is " display: none " if we apply this property to any html tag than that tag and tag content will not visible to users.   Step 1 : Find out the ID or Class of the above mentioned links. Step 2: We need to know about the CSS property to hide the content i.e display: none. Step 3: Apply the CSS property to ID or Class of the above mentioned links. Step 4: Open your SharePoint site in the Chrome browser and Right click on Recycle Bin Link Or All Site Content links and then select inspect element and then navigate to the parent UL of that links and get the class named as: s4-specialNavLinkList. If you don't have Chrome or don't know how to get the class of the above mentioned links, don't worry you can use the following class: s4-specialNavLinkList it's unique class to all the SharePoint 2010 site. Step 5: Apply the CSS property to that class "s4-specialNavLinkList". Find the bellow code [css] <style type="text/css"> .s4-specialNavLinkList { display: none; } </style> [/css] Step 6: Place the above CSS code before the end of head closing tag. Step 7: We will see to how to place the code in master page in a very simple way. Step 8: Open your site in the SharePoint designer and click on master pages and then open the master page that currently using for your site, by default master page is v4.master so if you are using the default master then open the v4.master page in edit mode and find the end of head tag and paste the above code and save the master page.