Customize SuiteBar on modern SharePoint online site

[Snehal_Rana]

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. 

[#2]

@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.

[#3]

@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?

[#4]

@Snehal_Rana 

Hi Snehal,we might need to do an application customizer as explained in this link

http://thomasdaly.net/2018/05/14/trimming-the-suite-bar-ribbon-on-modern-sharepoint-sites-in-office-...

[#5]

@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: 

 

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?

[#6]

no, that is not supported

[#7 · Accepted 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.

[#8]

@Dean Gross 

Hi Snehal,

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

[#9]

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

[#10]

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 !!

[#11]

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

[#12]

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

[#13]

@Snehal_Rana How did you add the custom logo?could you please share the thought.

[#14]

@chanduMoss @Snehal_Rana Here are few similar threads about inject custom CSS/JS to SharePoint modern pages which might help you:

1. How can I include the same JS and CSS files on multiple SharePoint Modern Page? 
2. Hiding Office 365 Ribbon in SharePoint 

Note: DOM manipulation & CSS customizations are not recommended by Microsoft and some of your customization may break if Microsoft changes HTML element id/classes in new release updates.

---

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.