SOLVED

Customize SuiteBar on modern SharePoint online site

Occasional Contributor

Is there a way to customize the Suitebar on modern sharepoint online site? I am aware of modifying background color from Organization theme from admin center. This has been mentioned here

 

I am referring to something like this

11 Replies

@Snehal_Rana While it is possible to do this by injected css, it is not supported and it's against branding guidelines from MS to customize or change the top suite bar.

@Beau Cameron Is there anyways to add security around the top suite bar so that only admins can see this and not the users in members group? 

Also is it even possible to take these icons on far right on bar below the top suite bar?

 

SharePointOnlineIcons.png

@O365Developer I was able to customize the background color of the SuiteBar and also was able to add my custom logo on the site as per the image shown below: 

CustomSuiteBar.png 

But I am still not able to hide the text "SharePoint" with custom text. I used standard admin functionality of "Manage custom themes for your organization" from Organization Profile in Admin Center

 

Any suggestions on how this can be accomplished using the PNP or CSS/Javascript injection?

no, that is not supported
best response confirmed by Snehal_Rana (Occasional Contributor)
Solution
Customizing the top bar is not supported, and if you do figure out a way, there is a good chance that it will be broken by a future update from Microsoft. That is their bar and you just leave it alone.

@Dean Gross 

 

Hi Snehal,

 

Thats not recommended and whatever @Dean Gross said is right ,it might break in future even if you do that ,

@O365Developer For now I will mark this close but will post my update as I dig in further. Thanks to everyone who responded. 

Quick update on hiding "SharePoint" from the suitebar: I was successfully able to do s

 

 

o in Modern Communication and Team sites. Below are the steps:

 

  1. Enable Modern JS React Script editor on the site

  2. Enable Custom Scripting at site level as well as tenant level

 

# If you don't already have the modules, run Install-module first!
Import-Module -Name SharePointPnPPowerShellOnline -DisableNameChecking
 
Connect-PnPOnline -Url 'https://[tenantname]-admin.sharepoint.com/' -Credentials (Get-Credential)
 
$DenyAddAndCustomizePagesStatusEnum = [Microsoft.Online.SharePoint.TenantAdministration.DenyAddAndCustomizePagesStatus]
 
$context = Get-PnPContext
$site = Get-PnPTenantSite -Detailed -Url 'https://[tenantname].sharepoint.com/sites/[sitename]'
 
$site.DenyAddAndCustomizePages = $DenyAddAndCustomizePagesStatusEnum::Disabled
 
$site.Update()
$context.ExecuteQuery()
 
# This row should output list of your sites' URLs and the status of their custom scripting (disabled or not)
Get-PnPTenantSite -Detailed -Url 'https://[tenantname].sharepoint.com/sites/[sitename]' | select url,DenyAddAndCustomizePages
 
Disconnect-PnPOnline
​

 

  • Add the following Javascript:

 

 

 

 

<script type="text/javascript">
var jq = document.createElement('script');
jq.src="<a href="<a href="<a href="<a href="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a>" target="_blank"><a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a>>" target="_blank"><a href="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a>" target="_blank"><a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a>>>" target="_blank"><a href="<a href="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a>" target="_blank"><a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a>>" target="_blank"><a href="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a>" target="_blank"><a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a</a>>>>" target="_blank"><a href="<a href="<a href="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a>" target="_blank"><a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a>>" target="_blank"><a href="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a>" target="_blank"><a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a</a>>>" target="_blank"><a href="<a href="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a>" target="_blank"><a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a</a>>" target="_blank"><a href="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a</a>" target="_blank"><a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a</a" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a</a</a>>>>>";
document.getElementsByTagName('head')[0].appendChild(jq);

setTimeout(
console.log('Code Executd');
debugger;
$(document).ready(function(){
setTimeout(function(){$('#O365_AppName').find('span').hide();},2000);
}), 1000);
</script>
<style type="text/css">
#O365_AppName span{display:none;}
</style>​

 

 

 

It works like a charm !!

 

I"m curious. Why do want to do this?

@Dean Gross I didn't but my client requested this