How to hide top bars for Sharepoint 2016

Question

I am creating a Public Facing Site(Publishing Portal) in Sharepoint 2016. I want to hide two top bars which are shown in the screenshot so that they are not displayed to the end user. How can I achieve that using Sharepoint Server 2016?

Answer 1

To hide the ribbon as you highlighted for all users, try to add the below CSS in your master page.

#suiteBarTop, #s4-ribbonrow
{
  display: none;
}

For the only suiteBar that contains SharePoint word and colored black, try this

#suiteBarTop
{
  display: none;
}

Answer 2

Add the following code into tag in master page to achieve it.

<script type="text/javascript">
window.onload = function() {
    if(_spPageContextInfo.userId==undefined){
        document.getElementById("suiteBar").style.display = "none";
        document.getElementById("s4-ribbonrow").style.display = "none";
    }   
}
</script>

Or we can use Security Trimmed Control to achieve it, check the article below.

Add a Security Trim snippet in SharePoint