SharePoint APP – Hide Show Ribbon Row and Site Logo using CSS and jQuery

To Hide Show SharePoint Ribbon and Site Logo follow below steps.

Default SharePoint APP Page

CSS to hide SharePoint Suite Bar, Ribbon and Site Logo (DeltaSiteLogo)

<style type="text/css">
/*Start - Hide SharePoint Suite Bar*/
#suiteBar {
display: none;
}
/*End- Hide SharePoint Suite Bar*/

/*Start - Hide SharePoint Ribbon*/
#s4-ribbonrow {
display: none;
}
/*End - Hide SharePoint Ribbon*/

/*Start - Hide SharePoint Logo*/
#DeltaSiteLogo {
display: none;
}
/*End - Hide SharePoint Logo*/
</style>

Result :

Once we hide Site Logo it keeps space of Div

I added JavaScript to completely remove it.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#siteIcon").remove();
});
</script>

Result :

 

To hide Breadcrumb and Title we can use below script

/*Start - Breadcrumb and Title*/
#s4-titlerow {
display: none !important;
}
/*End - Breadcrumb and Title*/

Or to remove it we can use below script

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#s4-titlerow").remove();
});
</script>

Result: