question

LanceA-3253 avatar image
0 Votes"
LanceA-3253 asked EmilyDu-MSFT commented

Change color of the SharePoint App Bar

Is there a way for me to change the color of the new App Bar? The one on the left-navigation?

![96371-image.png][1]


office-sharepoint-online
image.png (3.1 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

EmilyDu-MSFT avatar image
0 Votes"
EmilyDu-MSFT answered EmilyDu-MSFT commented

@LanceA-3253

Here’re steps:

1.Deploy the react-application-injectcss web part.
References:
https://github.com/hugoabernier/react-application-injectcss
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part
https://tahoeninjas.blog/2018/10/29/update-inject-custom-css-on-sharepoint-modern-pages-using-spfx-application-extensions/

2.Create a custom CSS file with below codes.

 .sp-appBar{
 Background:red !important;
 }

3.Upload the CSS file as custom.css into the style library of the root site collection. (i.e.: https://<yourtenant>.sharepoint.com/Style%20Library/Forms/AllItems.aspx).

4.Navigate to your site, the custom CSS should be applied.
96597-1.png


If an Answer is helpful, please click "Accept Answer" and upvote it
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.







1.png (28.8 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@LanceA-3253

I'm checking how the things are going on about this issue. Whether the answer helps you?

You can accept the answer if it helps.


If an Answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.




0 Votes 0 ·