Hide SharePoint “RibbonRow” and “SuiteBar” From Anonymous Users

Posted on Updated on


For public facing SharePoint sites most of the time peoples don’t want to show SharePoint “Suitebar” and “RibbonRow” for Antonymous Users

1

So here how you can hide SharePoint 2013 “suiteBar” for anonymous users.

  1. Open the master page (default Master and the Home Page Master) using SharePoint Designer. Before edit your master page take a backup copy Smile

image 

2. Select your master page -> right click –>Click on  “check out”

image

image

3. Select the master page again -> right click –> Click on “edit file in advanced mode”

image

4. Find the <div id=”suiteBar” class=”ms-dialogHidden noindex”> code block

image

5. Now change <div id=”suiteBar” class=”ms-dialogHidden noindex”>  to <div id=”suiteBar” class=”ms-dialogHidden noindex” style=”display:none”>

image 

 

This will hide the “suitbar” for all users including login users.but we need to enable suite bar for login users.to do that insert below script block right after the above </div> tag

6.Right click on <div id=”suiteBar” class=”ms-dialogHidden noindex”>  to <div id=”suiteBar” class=”ms-dialogHidden noindex” style=”display:none”> code block and click on “Select Tag”

image 

Suitebar_New

7. insert below script block right after the selected section

<!– My Custom Code –>

<SharePoint:SPSecurityTrimmedControl ID=”HideSuiteBar” runat=”server” PermissionsString=”ManageWeb”>

<script type=”text/jscript”>

document.getElementById(“suiteBar”).style.display = “block”;

</script>

</SharePoint:SPSecurityTrimmedControl>

<!– –>

Hide_SuiteBar_New

 

This will hide SharePoint “SuiteBar” for Anonymous users.

SNAGHTML2c8c40e4

Now we have to hide SharePoint “Ribbon Row”

8.Go to your master page. find  <div id=”s4-ribbonrow” style=”height: 35px; display: inherit !important;”> code block.

image

9. Change <div id=”s4-ribbonrow”> to <div id=”s4-ribbonrow” style=” display:none”>

image

10. Right click on <div id=”s4-ribbonrow” style=” display:none”> code block -> click on “Select Tag”

image 

image

11. Insert below script block right after the above selected </div> tag. (at the end of the Selected Tag)

<!– My Custom Code –>

<SharePoint:SPSecurityTrimmedControl ID=”HideRibbonRow” runat=”server” PermissionsString=”ManageWeb”>

<script type=”text/javascript”>

document.getElementById(“s4-ribbonrow”).style.display = “block”;

</script>

</SharePoint:SPSecurityTrimmedControl>

<!– –>

Hide_S4_Ribbon_New

 

12. After Insert above code block .your page will look like below screenshot.

S4_Ribbon_New

 

13. “Save” your changes and “Check In” the “Master Page”.

14. This is the final output / View for “anonymous” users.

SNAGHTML3e1597c

Note :

You have to “DeactivateMinimal Download Strategy” feature from “Manage Site Features” to take effect all these changes.

Site_Features

Minimal Download Strategy

You can use below url to login to you site.because now you can’t see “Sign in” Link on your pages. 🙂

http://SiteUrl/_windows/default.aspx

Happy Coding  Smile

3 thoughts on “Hide SharePoint “RibbonRow” and “SuiteBar” From Anonymous Users

    Anonymous said:
    October 10, 2014 at 12:43 AM

    thanks

    Anonymous said:
    January 6, 2015 at 10:31 PM

    I have searched so long for this solution. Thank you.

    wred said:
    January 24, 2018 at 11:44 AM

    still very applicable in 2018!! thanks so much – best instructions ever on this.

Leave a comment