Add a clickable button on the top-right corner of the SharePoint online modern pages

Question

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. Add a clickable button on the top-right corner >> and when users click on this an external link will open.

Here is what we need to build (The Green button):-

So can anyone advice how we can achieve the above?

Thanks

Answer 1

Create SharePoint framework Extension - Application Customizer. Add button with jQuery or pure JavaScript.

Be aware that in this solution if Microsoft change layout or classnames it can affect result.

I am using On premises SharePoint 2019 (modern design) and I am changing that part with this code:

export default class MyCustomizerApplicationCustomizer extends BaseApplicationCustomizer<{}> {
  @override
  public async onInit(): Promise<any> {
    try {
       await this.wait('.o365cs-nav-centerAlign');
       if (window.screen.availWidth < 639) {
         $('.o365cs-nav-centerAlign').css({"height":"50px", "cursor":"pointer","background":"url(https://..._intranet_logo.png) no-repeat left center"});
         $('.o365cs-nav-centerAlign').click(function() {
           window.location.href = 'https://...';
         });
       } else {
         $('.o365cs-nav-centerAlign').html('
         <div class=' + styles.brandingMainDiv + '>
         <a href='https://...' style='line-height: 46px;'>
           <img src='https://..._intranet_logo.png' style='margin: auto;vertical-align: middle;display: inline-block;'/>
         </a>
         <div style='margin-left:15px;border-left:1px solid white;'></div>
         <a href='' + this.context.pageContext.web.absoluteUrl + ''>
           <div style='line-height: 40px;display: inline-block;font-size: 20px;-webkit-font-smoothing: antialiased;margin: 0px 0 0 25px;vertical-align: top;font-weight: bold;color:white;'>' + this.context.pageContext.web.title + '
           </div>
         </a>
       </div>
     ');
    }
  } catch (error) {
    console.log (error);
  };
  return Promise.resolve();
}
  private wait = (selector) => {
    return new Promise((resolve, reject) => {
      const waitForEl = (selector, count = 0) => {
      const el = $(selector);
      if (el.length > 0) {
        resolve(el);
      } else {
        setTimeout(() => {
          count++;
          if (count < 1000) {
            waitForEl(selector, count);
          } else {
            reject('Error: More than 1000 attempts to wait for element');
          }
        }, 100);
      }
    };
    waitForEl(selector);
  });
  }
}