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:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s