2

I am working with SPOnline and trying to see if there is a way to change link/url when users click on SharePoint in top bar. See below screenshot.

enter image description here

I believe it has to be done at master page level, can someone help with CSS/JS code to achieve this, thanks in advance.

4

Changing this falls outside of the realm of supported. Anything in the suite nav you should not touch with either CSS or JS overrides.

1

Although I agree with Trevor that it is not supported, 'Classic' Sites will eventually be unsupported. But this is not the end of the world. With SPFx, Microsoft is either attempting to turn SP Admins into Devs or make SP Devs into Admins, its unclear as of now.

Notwithstanding the foregoing, your solution is plain vanilla javascript: if you place this code snippet into a script editor webpart for a single page it works:

<script type="text/javascript">
       var myDOMgrp = document.getElementsByClassName("o365button");  
           /* Above:  this creates an array of DOM elements 
              whose class attribute *contains* o365button 
              (there usually a lot of them on a given page) */
       var myDOMitm = myDOMgrp[4];  
          /* Above:  This selects the fifth DOM element 
             with the class name (which may be semi-unique to my tenant) 
             and one of a litany of reasons why it's not supported. */
       myDOMitm.href = "https://Your URL Here";  
          /* Above:  Assign a new value to the HREF attribute */
          /** BONUS **/
          /*  Change the Text of the 'SharePoint' Link itself  */
       myDOMitm.innerHtml = "<span class='o365cs-nav-brandingText'>Site Name Here</span>";
</script>

Using Jquery gives a bit more flexibility in selectors, but requires jQuery to be injected into the page:

<script type="text/javascript">
     $('a[aria-label="Go to SharePoint"]').attr("href","https://Your URL Here");  
      /* Above: Smaller code footprint, more processor intensive, 
         requires jQuery to already be loaded */
</script>

The above solution works on a page-level.

My assumption is that you are currently using SP 'Classic' (not Modern) sites. If you don't know the difference, you have a lot of research to do about the future.

If you need to deploy across the tenant space, a different technique will need to be employed, and you probably have a lot more styling and customizing you will be required to deploy. You can shoehorn custom JS code into every page of every 'classic site' By deploying the Enable-PNPResponsiveUI via powershell, after modification.

  • Thanks. unfortunately none of the approaches work. – mdevm Jan 16 at 19:34
  • Be sure that the index of myDOMgrp[index] is correct. It may not be 4 in your tenant. – A.k.A. Fritz Jan 16 at 19:41
  • Thanks. How can I check that? using developer tools? FYI, I am working with Classic UI. – mdevm Jan 16 at 19:43
  • Use F12 dev tools. Copy and past the JS code above into the console (w/o <script> tags). Press Enter. Increment or decrement the myDOMgrp[index] until you have the desired effect. Alternatively, just type this into the console and press enter: myDOMgrp this will return the entire array of elements. You are looking for the index of the first occurrence of this value in the array: a.o365cs-nav-appTitle.o365cs-topnavText.o365button (Array indexes in JS are 0-based indexes) – A.k.A. Fritz Jan 16 at 20:23
1

You can replace the SharePoint text and URL with the following JavaScript. The SP.SOD.executeOrDelayUntilScriptLoaded ensures that your changes occur after all SharePoint scripts are loaded.

SP.SOD.executeOrDelayUntilScriptLoaded(brandingChanges, 'SP.js');
function brandingChanges(){
    var myName = 'New Name'; // <-- Replace 'New Name' with the new title you want.
    var myURL = 'https://myurl'; // <-- Replace 'https://myurl' with the new URL you want.
    // No modifications required below
    var spTitle = document.getElementsByClassName('o365cs-nav-appTitle')[0];
    spTitle.setAttribute('href', myURL);
    spTitle.innerHTML = '<span class="o365cs-nav-brandingText">'+myName+'</span>';
}
  • This doesn't work. – mdevm Jan 16 at 19:28
  • Can you please tell what goes in place of 'New Name'? – mdevm Jan 17 at 1:39
  • You will replace the text with the new text you want to display instead of "SharePoint". Post updated for additional clarity. – AtariPixel Jan 17 at 9:06
  • Hi Atari, thanks for the feedback. I am only looking to change url and URL is not changing post adding this code in script editor web part on the page. – mdevm Jan 17 at 14:14
0

I don't know the exact requirement of yours. So I am giving this answer as per my view.

It is not recommended to change the text/url in top suite nav bar.

Also it is not good practice to edit your master page for such requirements.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.