question

johnjohn-0472 avatar image
0 Votes"
johnjohn-0472 asked RaytheonXie-MSFT commented

Change the Background color of the top navigation for our site and add a button

I have a modern communication site inside our SharePoint Online tenant, and we want to do the following modification to our top navigation area:-

1) Change the background color to be dark blue

2) Add a button on the top-right corner >> and when users click on this an external link will open.

Here is what we need to build:-

202493-sw.png

So can anyone advice how we can achieve the above 2 points?

Thanks


office-sharepoint-onlineoffice-sharepoint-server-developmentoffice-sharepoint-server-customization
sw.png (4.8 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.

TKujala avatar image
0 Votes"
TKujala answered johnjohn-0472 commented
· 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.

@TKujala thanks but this shows how to change the background color,, but what about showing a clickable button ?

0 Votes 0 ·
RaytheonXie-MSFT avatar image
0 Votes"
RaytheonXie-MSFT answered RaytheonXie-MSFT commented

Hi @johnjohn-0472,
If you want to change the global navigation in the modern experience, have a look at Application Customizers and use the header placeholder.
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions



===================================
If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
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.


· 4
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.

@RaytheonXie-MSFT but i did not get how i can add a clickable button ? Thanks

0 Votes 0 ·

Hi @johnjohn-0472,
We are unable to insert js code or html code to the top navigation bar. We can only change the css style. If you want to add a click button. We can try to custom a link as a workaround. Please refer to following document
https://support.microsoft.com/en-us/office/customize-the-navigation-on-your-sharepoint-site-3cd61ae7-a9ed-4e1e-bf6d-4655f0bf25ca

0 Votes 0 ·

Hi @johnjohn-0472,
Would you tell me whether your issue has been resolved or have any update?
I am looking forward to your reply.

Have a nice day!

Thanks,
Raytheon Xie

0 Votes 0 ·

Hi @johnjohn-0472,
I am checking to see how things are going there on this issue.

0 Votes 0 ·
sadomovalex avatar image
0 Votes"
sadomovalex answered

you may add custom elements to the page header (not to navigation though) via application customizer: Use page placeholders from Application Customizer.


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.